html-表格标签

一、表格标签

1. 表格的主要作用

表格主要用于显示､展示数据,因为它可以让数据显示的非常的规整,可读性非常好｡特别是后台展示数据的时候,能够熟练运用表格就显得很重要｡一个清爽简约的表格能够把繁杂的数据表现得很有条理｡

总结: 表格不是用来布局页面的,而是用来展示数据的.

2.表格的基本语法

<table><tr><th>表头</th><td>数据</td></tr>
</table>

<th>：表头单元格，内容加粗居中

1. <table> </table> 是用于定义表格的标签｡

2. <tr> </tr> 标签用于定义表格中的行,必须嵌套在 <table> </table>标签中｡

3. <td> </td> 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中｡

4. 字母 td 指表格数据(table data),即数据单元格的内容｡

<th>：Table Head Cell，表头单元格，

<table>：Table，用于定义表格，是整个表格结构的容器标签，包含表格的所有内容。

<tr>：Table Row，用于定义表格中的行，在<table>标签内部，通过<tr>标签来划分不同的行，每一行包含多个单元格。

<td>：Table Data Cell，用于定义表格中的单元格，在<tr>标签内部，每个<td>标签代表一个数据单元格，用于存放具体的数据内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表头单元格标签</title>
</head><body><table><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></html>

运行结果：

3.表格属性

表格标签这部分属性我们实际开发我们不常用,后面通过 CSS 来设置.

目的有2个:

1. 记住这些英语单词,后面 CSS 会使用.

2. 直观感受表格的外观形态.

⑴.align：对齐；使一致；使成一行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格属性</title>
</head><body><!-- 这些属性要写到表格标签table 里面去 --><table align="right"><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></html>

表格在页面的显示位置

center：居中

right：右边

⑵.border：边界；边框；边缘

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格属性</title>
</head><body><!-- 这些属性要写到表格标签table 里面去 --><table align="center" border="1"><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></html>

加变框，

⑶.cellpadding：单元格内边距；单元格填充

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格属性</title>
</head><body><!-- 这些属性要写到表格标签table 里面去 --><table align="center" border="1" cellpadding="30"><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></html>

文字与单元格边框的距离，相当于单元格的长和宽

⑷cellspacing：单元格间距

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格属性</title>
</head><body><!-- 这些属性要写到表格标签table 里面去 --><table align="center" border="1" cellpadding="30" cellspacing="0"><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></html>

单元格与单元格之间的距离

cellspacing="0"

cellspacing="40"

⑸.width或height

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格属性</title>
</head><body><!-- 这些属性要写到表格标签table 里面去 --><table align="center" border="1" cellpadding="30" cellspacing="40" width="500" height="500"><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></html>

是表格的长和宽，不是单元格

二、表格结构标签

使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分.

在表格标签中,分别用:<thead>标签表格的头部区域､<tbody>标签表格的主体区域. 这样可以更好的分清表格结构｡

。。。。目前看作用不明显，就是写代码分割用的

1. <thead></thead>:用于定义表格的头部｡<thead> 内部必须拥有 <tr> 标签｡一般是位于第一行｡

2. <tbody></tbody>:用于定义表格的主体,主要用于放数据本体｡

3. 以上标签都是放在 <table></table> 标签中｡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>今日小说排行榜</title>
</head>
<body><table align="center" width="500" height="249" border="1" cellspacing="0"><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>3</td><td>西游记</td><td><img src="up.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr><tr><td>1</td><td>鬼吹灯</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td></tr></tbody>           </table>
</body>
</html>

运行结果：

三、合并单元格

特殊情况下,可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.
1. 合并单元格方式
2. 目标单元格
3. 合并单元格的步骤

1.合并单元格方式:

跨行合并:rowspan="合并单元格的个数"，目标单元格为最上侧单元格。

跨列合并:colspan="合并单元格的个数"，目标单元格为最左侧单元格。

跨行合并：Row Span，“rowspan” 是 “Row Span” 的缩写。“Row” 意为行，“Span” 有跨度、跨越的意思，合起来表示跨越行，即跨行合并。

跨列合并：Column Span，“colspan” 是 “Column Span” 的缩写。“Column” 表示列，“Span” 同样是跨度、跨越的意思，整体意思是跨越列，即跨列合并。

2.目标单元格:(写合并代码)

跨行:最上侧单元格为目标单元格, 写合并代码

跨列:最左侧单元格为目标单元格, 写合并代码

3.合并单元格三步曲:

1. 先确定是跨行还是跨列合并｡

2. 找到目标单元格. 写上合并方式 = 合并的单元格数量｡比如:<td colspan=“2”></td>｡

3. 删除多余的单元格｡

要求：合成下面这样子

一开始：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>合并单元格</title>
</head><body><table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
</body></html>

运行结果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>合并单元格</title>
</head><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></html>

运行结果：