目录
基本表格
两个单元格合二为一(横向)
两个单元格合二为一(纵向)
四个单元格合并(横向+纵向)
表格大小
单元格内居中对齐
右对齐
底部对齐
表格背景颜色
表格单元格边缘距
例子
例子一
例子二
表格名称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>
如果觉得《【HTML+CSS网页设计与布局 从入门到精通】第5章-表格》对你有帮助,请点赞、收藏,并留下你的观点哦!