在 HTML 4.01 中,不赞成使用 "align" 和 "bgcolor" 属性。
在 HTML5 中,不支持 <table> 标签的大部分属性。
一:创建表格
<span style="white-space:pre"> </span><table >
<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
</table>
二:给表格加线:
只需要在table 标签中添加border属性即可
<table border="1">
<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
</table>
三:设置表格小标题: th标签是小标题,代表每一列。默认加粗,居中
<table border="1">
<tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
</table>
四:设置表格标题:用caption
<table border="1">
<caption>表格标题</caption>
<tr><th>标题一</th><th>标题二</th><th>标题三</th></tr>
<tr><td>一单元</td><td>二单元</td><td>三单元</td></tr>
<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td></tr>
</table>
七:合并单元格:colspan代表合并行,rowspan代表合并列
<table border="1">
<caption>表格标题</caption>
<tr><th colspan="4">标题一</th><th>标题二</th><th>标题三</th></tr>
<tr ><td rowspan="3">一单元</td><td>二单元</td><td>三单元</td><td>一单元</td><td>二单元</td><td rowspan="4">三单元</td></tr>
<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td><td>一单元</td></tr>
<tr><td>一单元</td><td>二单元</td><td>三单元</td><td>一单元</td></tr>
<tr><td>一号楼</td><td>二号楼</td><td>三号楼</td><td>一单元</td><td>二单元</td></tr>
</table>
八:加表头,表内容,表尾。这是标准规范表格的格式。开发中必须这样写
<caption>大标题</caption>
<tr><th colspan="5">小标题</th></tr>
<thead>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</thead>
<tbody>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tbody>
<tfoot>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tfoot>
</table>
九:给表格设置背景色:colgroup标签是table子元素,必须在table内,caption标题后。colgroup是分配列,span是指定多少列,style设置样式
col标签设置颜色。如果没有设置span默认为1
<table border="1">
<caption>大标题</caption>
<colgroup span="1" style="width: 100px" > <col style=" background: #0f0"></colgroup>
<colgroup span="3" style="width: 200px"> <col span="3" style="background: #f00"></colgroup>
<colgroup span="1" style="width: 100px"> <col style="background: #00f"></colgroup>
<tr><th colspan="5">小标题</th></tr>
<thead>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</thead>
<tbody>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tbody>
<tfoot>
<tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</tfoot>
</table>