效果
知识点
表格
语法
html
<table>
<tr>
<td>第一行第一列的内容</td>
<td>第一行第二列的内容</td>
<td>第一行第三列的内容</td>
...
</tr>
<tr>
<td>第二行第一列的内容</td>
<td>第二行第二列的内容</td>
<td>第二行第三列的内容</td>
...
</tr>
...
</table>
- <table>:表格
- <tr>:行
- <td>:列(单元格) 或<th>:表头单元格
属性
|-------------|---------------|-------------------|
| 属性名 | 含义 | 常用属性值 |
| border | 设置表格边框 | 像素值 |
| cellspacing | 单元格和单元格之间的距离 | 像素值(默认2) |
| cellpadding | 单元格和内容之间的距离 | 像素值(默认1) |
| width | 表格宽度 | 像素值 |
| height | 表格高度 | 像素值 |
| align | 表格在网页中的水平对齐方式 | left、center、right |
表格标题标签
- 用来定义表格标题,会居中显示在表格上面
- 必须放在table标签后面
html
<table>
<caption>火锅店</caption>
</table>
合并单元格
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
从上到下,从左到右进行合并,不论是跨行还是跨列,都是在td上进行的
实现表格边框一条线
将表格属性cellspacing设为0
html
<table cellspacing="0"></table>
源码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格练习</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" width="500" height="300">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/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="images/down.jpg"></td>
<td>124</td>
<td>415643</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="images/down.jpg"></td>
<td>4562</td>
<td>1325</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="images/down.jpg"></td>
<td>111</td>
<td>879</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="images/up.jpg"></td>
<td>222</td>
<td>31635</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="images/down.jpg"></td>
<td>456</td>
<td>999</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="images/up.jpg"></td>
<td>777</td>
<td>1000</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>