表格由<table>标签定义,每个表格均有若干行(有<tr>标签定义),<td>标签定义表格中的数据,数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
实例:
<table border=”1”>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
HTML表格和边框属性
如果不定义边框属性,则表格将不显示边框,有时候很有用,但大多数时候,我们希望表格显示边框。
可以使用边框属性border来定义表格边框
HTML表格表头
表格的表头由<th>标签定义
大多数浏览器会把表头显示为粗体文本
实例:
<table border=”1”>
<tr>
<th>第一行</th>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<th>第二行</th>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
跨行跨列的表格
在HTML文档中,我们需要跨行或者跨列来布局表格,因此跨行可以使用colspan属性,跨列使用rowspan属性,属性值为跨行或跨列的个数
实例:
<h4>跨两列表格演示</h4>
<table border=”1”>
<tr>
<th>第一行</th>
<td>第一行第一列</td>
<td colspan="2">第一行第二列</td>
</tr>
<tr>
<th>第二行</th>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
<h4>跨两行表格演示</h4>
<table border=”1”>
<tr>
<td rowspan="2">第一行</td>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
HTML表格边框与距离
HTML表格边框由cellpadding属性来定义表格边框,表格距离可以用cellspacing属性来定义
实例:
<h4>没有单元格边距:</h4>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<h4>有单元格边距:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<h4>无单元格距离</h4>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<h4>有单元格距离</h4>
<table border="1" cellspacing="10">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>