HTML表格


HTML表格

  • 表格由 <table>标签来定义。每个表格均有若干行(由 <tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。
  • 字母 td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

示例:


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 

在浏览器显示如下:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


表格和边框属性

  • 如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。
  • 使用边框属性来显示一个带有边框的表格:

示例:


<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
 

在浏览器显示如下:

Row 1, cell 1 Row 1, cell 2


表格的表头

  • 表格的表头使用 标签进行定义。
  • 大多数浏览器会把表头显示为粗体居中的文本:

示例:


<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
 

在浏览器显示如下:

Head1 Head2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


表格中的空单元格

  • 在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

示例:


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
 

浏览器可能会这样显示:


注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

示例:


<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>& nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>
 

在浏览器显示如下:

row 1, cell 1 row 1, cell 2
  row 2, cell 2


带有标题的表格 <caption>标签

示例:

		
<table border="1">
<caption>我的标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
 

在浏览器显示如下:

我的标题
100 200 300
400 500 600


跨行或跨列的表格单元格 rowspan或colspan属性

横跨两列的单元格示例:

		
<!--横跨两列的单元格 -->
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>张三</td>
  <td>11111111111</td>
  <td>22222222222</td>
</tr>
</table>
 

在浏览器显示如下:

姓名 电话
张三 11111111111 22222222222

横跨两行的单元格示例:

		
<!--横跨两行的单元格-->
<table border="1">
<tr>
  <th>姓名</th>
  <td>张三</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>11111111111</td>
</tr>
<tr>
  <td>22222222222</td>
</tr>
</table>
 

在浏览器显示如下:

姓名 张三
电话 11111111111
22222222222




联系我们 | 友情链接