跳转至

表格标签

表格主要作用：显示、展示数据

一、基本格式

Text Only
<table>
        <tr>
                <td>单元格内容</tr>
        </tr>
</table>

image1

1．\<table>\</table>是用于定义表格的标签． 2．\<tr>\</tr>标签于定义表格中的行，必须嵌套在\<table>\</table>标签中 3．\<td>\</td>用于定义表格中的单元格，必须嵌套在\<tr>\<／tr>标签中。 4 . 字母td指表格数据(tabledata），即数单元格的内容 案例，写出表格 image2

<body>

<table>

<tr><td>姓名</td> <td>性别</td> <td> 年龄 </td></tr>

<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>

<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>

<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>

<tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>

</table>

</body>

二、表头单元格

\<th>\</th> 一般位于表格第一行，居中并加粗 image3

<body>

<!-- 这些属性要写到表格标签table 里面去 -->

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">

<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>

<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>

<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>

<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>

<tr><td>黎明</td> <td>男</td> <td> 57 </td></tr>

</table>

</body>

三、表格属性

(不常用，后用CSS) image4

案例：小说排行榜 image5

<body>

<table align="center" width="500" height="249" border="1" cellspacing="0">

<thread>

<tr>

<th>排名</th>

<th>关键词</th>

<th>趋势</th>

<th>今日搜索</th>

<th>最近七日</th>

<th>相关链接</th>

</tr>

<thread>

<tr>

<td>1</td>

<td>鬼吹灯</td>

<td><img src="down.jpg" /></td>

<td>345</td>

<td>123</td>

<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百度</a></td>

</tr>

<tr>

<td>2</td>

<td>盗墓笔记</td>

<td><img src="down.jpg" /></td>

<td>124</td>

<td>675432</td>

<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百度</a></td>

</tr>

<tr>

<td>2</td>

<td>盗墓笔记</td>

<td><img src="down.jpg" /></td>

<td>124</td>

<td>675432</td>

<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百度</a></td>

</tr>

</table>

</body>

四、表格结构标签

更好分清表格结构 \<thead>标签 表格的头部区域 \<tbody>标签 表格的主体区域

五、合并单元格

1、方式

跨行合并 rowspan=”合并单元格的个数’ 跨列合并 colspan=”合并单元格的个数”

image6

目标单元格 跨行：最上侧，写合并代码 跨列：最左侧，写合并代码 2）步骤 1、确定行列 2、招目标单元格 3、删除多余 image7

<body>

<table width="500" height="249" border="1" cellspacing="0">

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td rowspan="2"></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

</body>