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>

运行结果：