深入了解html中表格的结构和属性
在了解表格属性之前先来了解一下表格的结构，thead是头部，tbody是身体部分即内容，tfoot是脚部。
- 表格的完整结构：
<!--table表示表格（整体）-->
<table>
<caption>表格的标题</caption>
<thead>
<!--tr表示行-->
<tr>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<!--td表示单元格（列）-->
<td>单元格内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚部</td>
</tr>
</tfoot>
</table>- 表格的基本结构：
<table>
<tr>
<th>表头</th>
</tr>
<tr>
<td>单元格内容</td>
</tr>
<tr>
<td>脚部</td>
</tr>
</table>注：在上面的结构中thead、tbody、tfoot可以省略不写，不写时，则默认为tbody；th标签有字体加粗文本居中的样式。
好了，了解了表格的结构，接下来来了解一下表格的属性，其实表格的大多数属性都被html5废弃了，在css出现之前，html4之后，常用table表格来布局页面。
- table的属性：
属性名 | 含义 | 属性值 |
width | 设置表格的宽度 | 像素(px)或者百分比(%)，默认为像素 |
height | 设置表格的高度 | 像素(px)或者百分比(%)，默认为像素 |
cellpadding | 单元格的边框与内容之间的距离 | 像素(px)或者百分比(%)，默认为1px |
cellspacing | 单元格之间的间隔 | 像素(px)或者百分比(%)，默认为2px |
align | 设置表格水平对齐 | left 、center、right |
frame | 设置表格外边框的线 | viod、box、border、above、below、hsides、lhs、rhs、vsides |
rules | 设置表格内边框的线 | none、rows、cols、all |
border | 设置表格边框的粗细 | 默认为0 |
bordercolor | 设置表格边框的颜色 | |
bgcolor | 设置表格背景颜色 | |
backgroung | 设置表格的背景 |
- tr的属性：
属性名 | 含义 | 属性值 |
align | 设置单格中的内容水平对齐 | left、center、right |
valign | 设置单格中的内容垂直对齐 | top、middle、bottom 、baseline(基线对齐) |
bgcolor | 设置表格行的背景颜色 |
- td的属性：
属性名 | 含义 | 属性值 |
width | 设置单元格的宽度 | 像素(px)或者百分比(%)，默认为像素 |
height | 设置单元格的高度 | 像素(px)或者百分比(%)，默认为像素 |
align | 设置单元格中的内容水平对齐 | left、center、right |
valign | 设置单元格中的内容垂直对齐 | top、middle、bottom 、baseline(基线对齐) |
rowspan | 设置跨行(纵向)合并单元格数 | |
colspan | 设置跨列(横向)合并单元格数 | |
bgcolor | 设置单元格背景颜色 | |
backgroung | 设置单元格的背景 |
了解一下frame和rules属性值：
frame的属性值 | 含义 |
viod | 不显示外边框 |
box | 显示四周的外边框 |
border | 显示四周的外边框 |
above | 显示上边的外边框 |
below | 显示下边的外边框 |
hsides | 显示上下的外边框 |
lhs | 显示左边的外边框 |
rhs | 显示右边的外边框 |
rhs | 显示左右的外边框 |
rules的属性值 | 含义 |
none | 不显示内边框 (默认值) |
rows | 在行之间显示内边框 |
cols | 在列之间显示内边框 |
all | 显示四周的内边框 |
好了，了解完表格的结构和表格的属性之后，让我们来看一下例子：
效果图：
代码的写法： 设置1px的边框，宽度为450px，高度为400px，去掉单元格之间的间隔，单元格内容与边框的距离为6，边框的颜色为绿色，加上背景图片。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高中课程表</title>
</head>
<body>
<table border="1" width="450" height="400" cellspacing="0"
cellpadding="6" bordercolor="#5FD9ED" background="_20181219072322.jpg" >
<caption>高中课程表</caption>
<tr>
<th>星期</th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
<th>日</th>
</tr>
<!--align="center" 设置tr标签里面的内容相对于单元格居中-->
<tr align="center">
<td>早读</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>生物</td>
<td>地理</td>
<td>历史</td>
</tr>
<tr align="center">
<!--rowspan="4" 纵向合并四个单元格-->
<td rowspan="4">上午</td>
<td>语文</td>
<td>地理</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>数学</td>
<td rowspan="4">自习</td>
</tr>
<tr align="center">
<td>英语</td>
<td>地理</td>
<td>化学</td>
<td>英语</td>
<td>生物</td>
<td>地理</td>
</tr>
<tr align="center">
<td>地理</td>
<td>英语</td>
<td>地理</td>
<td>化学</td>
<td>生物</td>
<td>语文</td>
</tr>
<tr align="center">
<td>数学</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>物理</td>
<td>生物</td>
</tr>
<tr align="center">
<td>午读</td>
<td>生物</td>
<td>地理</td>
<td>历史</td>
<td>地理</td>
<td>化学</td>
<td>物理</td>
<td rowspan="4">休息</td>
</tr>
<tr align="center">
<td rowspan="3">下午</td>
<td>物理</td>
<td>地理</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr align="center">
<td>体育</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>物理</td>
<td>英语</td>
</tr>
<tr align="center">
<td>生物</td>
<td>英语</td>
<td>地理</td>
<td>英语</td>
<td>语文</td>
<td>休息</td>
</tr>
<tr align="center">
<td>晚读</td>
<td>生物</td>
<td>地理</td>
<td>历史</td>
<td>地理</td>
<td>历史</td>
<td>物理</td>
<td>语文</td>
</tr>
<tr align="center">
<td>晚自修</td>
<!--colspan="7" 横向合并七个单元格-->
<td colspan="7" align="center">自习</td>
</tr>
</table>
</body>
</html>今天就分享到这里，您可以设置您喜欢的表格，如有问题请留言！
