0
点赞
收藏
分享

微信扫一扫

表格标签(HTML)


表格标签(HTML)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>

<body>
<table>
<!--定义表格-->
<tr>
<td>班级</td>
<td>姓名</td>
<td>学号</td>
</tr>
<!--tr定义行,td定义单元格 此时是三个单元格-->
<tr>
<td>xxx</td>
<td>xxx</td>
<td>201*******</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

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

<tr>
<th>姓名</th>
<th>性别</th>
<th>联系电话</th>
</tr>
<!--th为加粗显示-->
<tr>
<td>xxx</td>
<td>xxx</td>
<td>136********</td>
</tr>

</table>



<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table align="center" border="1" cellpadding="5">
<!-- 定义总表格 -->
<thead>
<tr>

<th>排名</th> <!-- th为表头部分 加粗效果 -->
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>

</tr>
</thead>

<tbody>
<tr>
<td>1</td> <!-- tr为行 td是将内容放于里边 都在tr行里 -->
<td>鬼吹灯</td>
<td><img src="down.jpg" width="20" height="20" /></td>
<td>42442</td>
<td>1236466</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="down.jpg" width="20" height="20" /></td>
<td>4545</td>
<td>998654</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg" width="20" height="20" /></td>
<td>24686</td>
<td>845412</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>圣墟</td>
<td><img src="down.jpg" width="20" height="20" /></td>
<td>65335</td>
<td>793265</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>火煌</td>
<td><img src="up.jpg" width="20" height="20" /></td>
<td>8684</td>
<td>454656</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg" width="20" height="20" /></td>
<td>3463</td>
<td>323656</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg" width="20" height="20" /></td>
<td>3446</td>
<td>125633</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</tbody>

</table>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table width="400" height="250" 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>

</html>


举报

相关推荐

0 条评论