HTML表格
表格描述
- 表格由 table 标签来定义。
- 每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。
- 字母 td(table data) 指表格数据，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
示例1
<table border="1">
<tr>
<td>
row 1,col 1
</td>
<td>
row 1,col 2
</td>
</tr>
<tr>
<td>
row 2,col 1
</td>
<td>
row 2,col 2
</td>
</tr>
</table>
表格标签
| 标签 | 描述 |
|---|---|
| table | 定义表格 |
| th | 定义表格的表头 |
| tr | 定义表格的行 |
| td | 定义表格的单元 |
| caption | 定义表格的标题 |
| colgroup | 定义表格的组 |
| col | 定义表格列的属性 |
| thead | 定义页眉 |
| tbody | 定义表格的主体 |
| tfoot | 定义表格的页脚 |
表格边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格： border=“1” 线条宽为1 如果线条宽=0 则没有线条 有单元格边距为10
```
<table border=“1” cellpadding="10”>
单元格间距=0
<table border="1" cellspacing="0”>
单元格间距=10
<table border="1" cellspacing="10”>
<table cellpadding="10">
<tr>
<td>
row 1,col 1
</td>
<td>
row 1,col 2
</td>
</tr>
<tr>
<td>
row 2,col 1
</td>
<td>
row 2,col 2
</td>
</tr>
</table>
```
表格的三大部分
HTML中的table可以大致分为三个部分：
thead ---------表格的页眉
tbody ---------表格的主体
tfoot ---------定义表格的页脚(在最下面,不管代码位置在哪里)
thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。
这个标签就是放在三间房子里面的东西，每一个 就是表格一行。
表格的每一行被分为一个个单元格。
每一个单元格就是用来存放数据的，这个数据分为两种：
- 数据的名称；
- 数据本身。
用 th标签 表示数据的名称(标题) ,
td标签表示真正的数据内容。
```
<table border="1">
<tfoot>
<tr><th>row end col1</th><th>row end col2</th></tr>
</tfoot>
<tbody>
<tr>
<td>
row 1,col 1
</td>
<td>
row 1,col 2
</td>
</tr>
<tr>
<td>
row 2,col 1
</td>
<td>
row 2,col 2
</td>
</tr>
</tbody>
<thead>
<tr><td>位置</td><td>位置</td></tr>
</thead>
</table>
```
合并单元格
-
colspan 合并列
-
rowspan 合并行
<table cellpadding="10" border="1"> <tr> <td colspan="2"> row 1,col 1 </td> <td> row 1,col 2 </td> </tr> <tr> <td> row 2,col 1 </td> <td> row 2,col 2 </td> <td rowspan="2"> row 1,col 2 </td> </tr> <tr> <td> row 2,col 1 </td> <td> row 2,col 2 </td> </tr> </table>
对表格进行属性设置
1.style标签
style标签风格设置,可以设置包括边框颜色等属性
2.width height
对表格的宽高进行设置(内部单元格不能超过表格总宽度)
3.align
左右对齐或居中