HTML表格

时间：2010-11-28 来源：九霄

<html>
<body>
<table border = "1">
<tr>
        <td>100</td>
        <td>200</td>
</tr>
<tr>
        <td>300</td>
        <td>400</td>
</tr> </table>
</body>
</html>

上面的例子定义了一个两行两列的表格如下:

100	200
300	400

　　可以看出表格是由<table>标签定义的.每个表格都有若干行(由标签<tr>定义),每个行包含若干个单元格(由标签<td>定义).字母td表示的是表中的数据

(table data),即是单元格中数据.单元格中数据可以是图片,标签,文本,列表,表单,水平线等.

　　border属性是用来指定表格边框的属性,默认的表格是没有边框的.当希望表格由边框时,可以根据需要给border属性不同的值.

单元格表头的定义.

代码

name	age
Mike	Maye
20	23

上面的表头是水平的,下面来看下垂直表头的定义.

垂直表头的定义.

<table border = "1">
<tr>
       <th>name</th>
       <td>Mike</th>
</tr>
<tr>
        <th>age</th>
        <td>20</th>
</tr>
</table>

name	Mike
age	20

空的单元格和表格的标题.

空单元格,即单元格中没有内容.空单元格可以这样定义<td></td>.但是这样定义,浏览器中不会显示单元格的边框.若想空单元格中显示单元格边框,可以添加一个空格占位符. <td>/&nbsp</td>. 表格的标题是有属性"caption"指定的.<table caption = "表格的标题"></table>

跨行或跨列的表格

　　跨行的表格

<table border = "1" caption = "跨行的表格">
<tr>
      <th>name</th>
      <th colspan = "2">age</th>
</tr>
<tr>
      <td>Mike</td>
      <td>20</td>
      <td>20</td>
</tr>
</table>

name	age
Mike	20	20

下面看下跨列的表格

<table border = "1">
<tr>
       <th>name</th>
       <td>Mike</td>
</tr>
<tr>
       <th rowspan = "2">age</th>
       <td>20</td>
</tr>
<tr>
       <td>23</td>
</tr>
</table>