一、表格定义
表格由
标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
运行结果:
二、表格常用属性
1.表格和边框属性
如果不定义边框属性,表格将不显示边框。但是大多数时候,我们希望显示边框。
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
使用边框属性来显示一个带有边框的表格:
运行结果:
大对数情况下我们并不希望我们表格的边框是这样的,所以我们可以利用cellspacing属性来增加或减小单元格之间的间距
运行结果:
<table border="1" cellspacing="0">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
2.表格和cellpading属性:
此属性是用来设置每个单元格的内容与单元格边框的距离
table border="1" cellpadding="20">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
运行结果:
3.表格的表头
表格的表头使用 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本:
<table border="1" cellspacing="0">
<tr>
<th>主题一</th>
<th>主题二</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
运行结果:
4.跨行或跨列的单元格
(1)跨列单元格
<table border="1" cellspacing="0">
<tr>
<th>姓名</th>
<th colspan="2">电话号</th>
</tr>
<tr>
<td>张三</td>
<td>123456</td>
<td>456789</td>
</tr>
<tr>
<td>李四</td>
<td>111111</td>
<td>222222</td>
</tr>
</table>
运行结果:
(2)跨行单元格
<table border="1" cellspacing="0">
<tr>
<th>姓名</th>
<td>张三</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>123456</td>
</tr>
<tr>
<td>222222</td>
</tr>
</table>
运行结果:
5.在表格中排列内容(align属性)
<table border="1" cellspacing="0" width="600">
<tr>
<th>主题一</th>
<th colspan="2">主题二</th>
</tr>
<tr>
<td align="left">第一行第一列</td>
<td align="right">第一行第二列</td>
<td align="right">第一行第三列</td>
</tr>
<tr>
<td align="left">第二行第一列</td>
<td align="right">第二行第二列</td>
<td align="right">第二行第三列</td>
</tr>
</table>
运行结果: