1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【HTML+CSS网页设计与布局 从入门到精通】第5章-表格

【HTML+CSS网页设计与布局 从入门到精通】第5章-表格

时间:2020-07-25 08:02:09

相关推荐

【HTML+CSS网页设计与布局 从入门到精通】第5章-表格

目录

基本表格

两个单元格合二为一(横向)

两个单元格合二为一(纵向)

四个单元格合并(横向+纵向)

表格大小

单元格内居中对齐

右对齐

底部对齐

表格背景颜色

表格单元格边缘距

例子

例子一

例子二

表格名称caption

基本表格

<html><head><title>基本表格</title></head><body><center><table border=1><tr><td> A1</td> <td>A2</td><td>A3</td> <td>A4</td></tr><tr><td>B1</td> <td>B2</td><td>B3</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

两个单元格合二为一(横向)

<html><head><title>表格</title></head><body><center><table border="1"><tr><td> A1</td> <td colspan="2">A2A3</td> <td>A4</td></tr><tr><td>B1</td> <td>B2</td><td>B3</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

两个单元格合二为一(纵向)

<html><head><title>表格</title></head><body><center><table border="1"><tr><td> A1</td> <td rowspan="2">A2<br>B2</td> <td>A3</td> <td>A4</td></tr><tr><td>B1</td> <td>B3</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

四个单元格合并(横向+纵向)

<html><head><title>表格</title></head><body><center><table border="1"><tr><td> A1</td> <td rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

表格大小

<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

单元格内居中对齐

<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

右对齐

<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr><td>B1</td> <td>B4</td></tr><tr align="right"><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

底部对齐

<html><head><title>表格</title></head><body><center><table border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr valign="bottom"><td>B1</td> <td>B4</td></tr><tr align="right"><td>C1</td> <td>C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

表格背景颜色

<html><head><title>表格</title></head><body><center><table bgcolor="#CCCCCC" border="1" height="150" width="200"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr valign="bottom"><td>B1</td> <td>B4</td></tr><tr bgcolor="#999999" align="right"><td>C1</td> <td bgcolor="#555555">C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

表格单元格边缘距

<html><head><title>表格</title></head><body><center><table bgcolor="#CCCCCC" border="1" height="150" width="200" cellpadding="4" cellspacing="6"><tr ><td> A1</td> <td align="center" rowspan="2" colspan="2">A2A3<br>B2B3</td><td>A4</td></tr><tr valign="bottom"><td>B1</td> <td>B4</td></tr><tr bgcolor="#999999" align="right"><td>C1</td> <td bgcolor="#555555">C2</td><td>C3</td> <td>C4</td></tr></table></center></body></html>

例子

例子一

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格演示</title></head><body><table width="400" border="1" align="center" bordercolor="#003399"><thead><tr><th colspan="2">产品</td><th colspan="2">描述信息</td></tr><tr align="center"><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr></thead><tbody><tr><th rowspan="2">大众</td><td>DZ-1</td><td>中端客户</td><td>100.00</td></tr><tr><td>DZ-2</td><td>低端客户</td><td>50.00</td></tr><tr><th rowspan="2">前沿</td><td>JY-1</td><td>高端客户</td><td>200.00</td></tr><tr><td>JY-2</td><td>中端客户</td><td>100.00</td></tr></tbody><tfoot><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot></table></body></html>

例子二

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格演示</title><style type="text/css">thead{background-color:#555;color:white; }tfoot{background:#BBB;}</style></head><body><table width="400" border="1" align="center" bordercolor="#003399"><thead><tr><th colspan="2">产品</td><th colspan="2">描述信息</td></tr><tr align="center"><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr></thead><tbody><tr><th rowspan="2">大众</td><td>DZ-1</td><td>中端客户</td><td>100.00</td></tr><tr><td>DZ-2</td><td>低端客户</td><td>50.00</td></tr><tr><th rowspan="2">前沿</td><td>JY-1</td><td>高端客户</td><td>200.00</td></tr><tr><td>JY-2</td><td>中端客户</td><td>100.00</td></tr></tbody><tfoot><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot></table></body></html>

表格名称caption

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>表格演示</title><style type="text/css">thead {background-color:#555;color:white;}tfoot {background:#BBB;}</style></head><body><table width="400" border="1" align="center" bordercolor="#003399"><caption>产品介绍表</caption><thead><tr><th colspan="2">产品</td><th colspan="2">描述信息</td></tr><tr align="center"><td>公司</td><td>编号</td><td>用途</td><td>价格</td></tr></thead><tbody><tr><th rowspan="2">大众</td><td>DZ-1</td><td>中端客户</td><td>100.00</td></tr><tr><td>DZ-2</td><td>低端客户</td><td>50.00</td></tr><tr><th rowspan="2">前沿</td><td>JY-1</td><td>高端客户</td><td>200.00</td></tr><tr><td>JY-2</td><td>中端客户</td><td>100.00</td></tr></tbody><tfoot><tr><td>2</td><td>4</td><td>3</td><td>120.00</td></tr></tfoot></table></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。