1.基础语法与结构
<table border="1" width="700">
<!-- 表格开始 -->
<!--caption 表格标题居中显示 -->
<caption>前端工程师平均工资</caption>
<!--thead,tbody,tfoot 表格头、主体、脚 -->
<thead>
<tr>
<!-- tr 行标签 -->
<!-- 表格头,内容居中、加粗显示 -->
<th>城市</th>
<th>2014年</th>
<th>2014年</th>
<th>2015年</th>
<th>2016年</th>
</tr>
<tr>
<th>城市</th>
<th>上半年</th>
<th>下半年</th>
<th>2015年</th>
<th>2016年</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td> <!-- td 单元格 -->
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>12000</td>
</tr>
<tr>
<td>上海</td> <!-- td 单元格 -->
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td> <!-- td 单元格 -->
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>11000</td>
</tr>
</tfoot>
</table> <!-- 表格结束 -->
<table>表格属性
属性 |
值 |
描述 |
Width |
Pixels、% |
规定表格的宽度 |
align |
Left、center、right |
表格相对周围元素的对齐方式 |
border |
pixels |
规定表格边框的宽度 |
Bgcolor |
rgb(x,x,x)、#xxxxxx、Colorname |
表格的背景颜色 |
cellpadding |
Pixels、% |
单元边沿与其内容之间的空白 |
cellspacing |
Pixels、% |
单元格之间的空白 |
frame |
属性值 |
规定外侧边框的哪个部分是可见的 |
rules |
属性值 |
规定内侧边框的哪个部分是可见的 |
图片介绍
属性 |
值 |
描述 |
frame |
void |
不显示外侧边框 |
△ |
above |
显示上部的外侧边框 |
△ |
below |
显示下部的外侧边框 |
△ |
hsides |
显示上部和下部的外侧边框 |
△ |
vsides |
显示左边和右边的外侧边框 |
△ |
lhs |
显示左边的外侧边框 |
△ |
rhs |
显示右边的外侧边框 |
△ |
box |
在所有四个边上显示外侧边框 |
△ |
border |
在所有四个边上显示外侧边框 |
2.<thead>、<tbody>和<tfoot>标签属性
属性 |
值 |
描述 |
align |
Left、center、right、justify、char |
<thead>、<tbody>和<tfoot>内容的水平对齐 |
valign |
top、middle、bottom、baseline |
<thead>、<tbody>和<tfoot>内容的垂直对齐 |
跨列属性colspan
跨行属性rowspan
3.表格嵌套
表格嵌套必须在<td>中
网友评论