第6章使用表格（html）

最新推荐文章于 2024-05-17 15:34:29 发布

误小果

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量158

点赞数

分类专栏：前端文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_72647241/article/details/128237662

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

                             第6章 使用表格（html）

目录标题

6.1创建表格
6.2表格基本属性
6.3表格的行属性
- 6.3.1行内文字的水平对齐方式align
- 6.3.2行内文字的垂直对齐方式valign
6.4单元格属性
- 6.4.1单元格跨列colspan
- 6.4.2单元格跨行rowspan
6.5 表格结构
6.6 练习题

6.1创建表格

表格是一种整理数据的手段，同时也是一种可视化的交流模式。简单的HTML表格由table标签以及一个或多个tr,th或td标签组成。

6.1.1表格的基本构成table,tr,td

（1）表格由行，列和单元格组成，一般通过表格标签table，行标签tr和单元格标签td来表示。表格的各种属性都要在表格的开始标签table和结束标签/table之间才有效。表格的基础标签如下：

标签	描述
table	定义表格
caption	定义表格标题
th	定义表格的表头
tr	定义表格的行
td	定义表格单元

（2）语法：

<table>
  <tr>
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
  </tr>
  <tr>
     <td>单元格内的文字</td>
     <td>单元格内的文字</td>
  <tr>
</table>

例子6-1
使用table标签创建表格，在table标签中使用tr标签为表格增加行，使用td标签表示行的每一个单元格。在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>第1行第1列单元格</td>
            <td>第1行第2列单元格</td>
        </tr>
        <tr>
            <td>第2行第1列单元格</td>
            <td>第2行第2列单元格</td>
        </tr>
    </table>
</body>
</html>

6.1.2设置表格的标题caption

（1）使用caption标签可以为表格设置标题单元格，表格的标题一般位于整个表格的第1行。使用table标签定义表格，该表格只能含有一个表格标签。
（2）语法：

<caption>表格的标题</caption>

例子6-2
创建表格，内容为考试成绩单，在table标签中创建caption标签，使用caption标签设置表格标题为"成绩单"。在浏览器中显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption>成绩单</caption>
        <tr>
            <td>张三</td>
            <td>95</td>
            <td>76</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>三毛</td>
            <td>80</td>
            <td>89</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

提示：使用caption标签创建表格标题的好处是标题定义包含在表格内。如果表格移动或在HTML文件中重定位，标题会随着表格相应移动。

6.1.3表头th

（1）表头的单元格用th标签来定义，th标签是td单元格标签的一种变体，它实质上仍是单元格标签。它一般位于第1行或第1列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示th标签中的内容。
（2）语法：

<table>
<tr>
   <th>表头的文字</th>
   <th>表头的文字</th>
</tr>
<tr>
  <td>单元格内的文字</td>
  <td>单元格内的文字</td>
</tr>
</table>

例子6-3
在例子6-2的基础上，增加表格的表头部分，在浏览器中显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>95</td>
            <td>76</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>三毛</td>
            <td>80</td>
            <td>89</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

6.2表格基本属性

（1）为了使创建的表格更加美观，醒目，需要对表格的属性进行设置，本节将详细讲解常用的宽度，边框，以及调整单元格距离的属性。下表为table的基础属性：

属性	值	描述
border	pixels	规定表格边框的宽度
cellpadding	pixels %	规定单元格边缘与其内容之间的空白
cellspacing	pixels %	规定单元格之间的空白
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的
summary	text	规定表格的摘要
width	pixels %	规定表格的宽度

6.2.1表格宽度width

（1）使用表格的width属性设置表格的宽度。如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。
（2）语法：

<table width="表格宽度">

（3）说明：
表格宽度的值可以是像素值，也可以为百分比值。
例子6-4
使用table创建表格，设置表格的宽度为500px，在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="500px">
        <caption>成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>95</td>
            <td>76</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>88</td>
            <td>90</td>
            <td>85</td>
        </tr>
        <tr>
            <td>三毛</td>
            <td>80</td>
            <td>89</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

6.2.2表格的边框border

（1）默认情况下如果不指定border属性，则浏览器将不显示表格边框。只有设置border值不为0,网页中才能显示出表格的边框。
（2）语法：

<table border="边框宽度">

例子6-5
在table标签中，使用border属性值设置表格的边框为"3"，在浏览器中的显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="3">
       <tr>
        <td>第1行第1列单元格</td>
        <td>第1行第2列单元格</td>
       </tr>
       <tr>
        <td>第2行第1列单元格</td>
        <td>第2行第2列单元格</td>
       </tr>
    </table>
</body>
</html>

提示：border属性设置的表格边框只能影响表格四周的边框宽度，而并不能影响单元格之间边框的尺寸。虽然设置边框宽度没有限制，但是一般边框设置不应该超过5px,过于宽大的边框会影响表格的整体美观。

6.2.3单元格间距cellspacing

（1）表格的内框宽度属性cellspacing用于设置表格内部两个单元格之间的距离，本小节将讲解怎样设置单元格之间的距离。
（2）语法：

<table cellspacing="内框宽度值">

（3）说明：
内框宽度的单位是px。

例子6-6
创建table表格，使用cellspacing属性设置单元格间距为10px，在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="10">
       <tr>
        <td>第1行第1列单元格</td>
        <td>第1行第2列单元格</td>
       </tr>
       <tr>
        <td>第2行第1列单元格</td>
        <td>第2行第2列单元格</td>
       </tr>
    </table>
</body>
</html>

6.2.4表格内文字与边框间距cellpadding

（1）在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去非常拥挤。使用cellpadding属性可以设置单元格边框与单元格里内容之间的距离。
（2）语法：

<table cellpadding="文字与边框距离值">

（3）说明：
单元格里的内容与边框的距离以px为单位。

例子6-7
给table标签增加cellpadding属性，设置单元格内边距为20px，在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellpadding="20">
       <tr>
        <td>第1行第1列单元格</td>
        <td>第1行第2列单元格</td>
       </tr>
       <tr>
        <td>第2行第1列单元格</td>
        <td>第2行第2列单元格</td>
       </tr>
    </table>
</body>
</html>

6.3表格的行属性

（1）在表格中，不仅可以对表格整体设置相关属性，还可以对单独的一行单元格设置相关属性。本节将介绍行的常用属性，tr标签的基础属性如下：

属性	值	描述
align	right left center justify char	定义表格行的内容对齐方式
char	character	规定根据哪个字符来进行文本对齐
charoff	number	规定第一个对齐字符的偏移量
valign	top middle bottom baseline	规定表格行中内容的垂直对齐方式

6.3.1行内文字的水平对齐方式align

（1）tr标签的align属性用来设置表格当前行的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖。常用的水平对齐方式有3种，分别是left,center和right。
语法：

<tr align="水平对齐方式">

例子6-8
使用tr标签的align属性，设置表中3行内容分别向左对齐，居中对齐，向右对齐，在浏览器中的显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="800px">
       <tr align="left">
        <td>第1行第1列单元格</td>
        <td>第1行第2列单元格</td>
       </tr>
       <tr align="center">
        <td>第2行第1列单元格</td>
        <td>第2行第2列单元格</td>
       </tr>
       <tr align="right">
        <td>第3行第1列单元格</td>
        <td>第3行第2列单元格</td>
       </tr>
    </table>
</body>
</html>

6.3.2行内文字的垂直对齐方式valign

（1）tr标签的valign属性用来设置表格当前行的垂直对齐方式。常用的垂直对齐方式有3种，分别是top,middle和bottom。
（2）语法：

<tr valign="垂直对齐方式">

例子6-9
使用tr标签的valign属性，设置表中第1行文字顶端对齐，第2行文字居中对齐，第3行文字底部对齐，在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="800px" height="800px">
       <tr valign="top">
        <td>第1行第1列单元格</td>
        <td>第1行第2列单元格</td>
       </tr>
       <tr valign="middle">
        <td>第2行第1列单元格</td>
        <td>第2行第2列单元格</td>
       </tr>
       <tr valign="bottom">
        <td>第3行第1列单元格</td>
        <td>第3行第2列单元格</td>
       </tr>
    </table>
</body>
</html>

6.4单元格属性

（1）单元格是表格中最基本的单位。td（单元格）全部包含在tr（行）中，一个行里面可以有任意多个单元格。在td标签中可以自定义设置单元格的各项属性，这些样式将覆盖table标签和tr标签已经定义的样式。本节主要介绍单元格的跨行和跨列，td标签的基础属性如下：

属性	值	描述
abbr	text	规定单元格中内容的缩写版本
align	left right center justify char	规定单元格内容的水平对齐方式
axis	category_name	对单元进行分类
char	character	规定根据哪个字符来进行内容的对齐
charoff	number	规定对齐字符的偏移量
colspan	number	规定单元格可横跨的列数
headers	header_cells’_id	规定与单元格相关的表头
rowspan	col colgroup row rowgroup	定义将表头数据与1单元数据相关联的方法
valign	top middle bottom baseline	规定单元格内容的垂直排列方式

6.4.1单元格跨列colspan

（1）在设计表格时，有时需要将两个或更多的相邻单元格组合成一个单元格，这时需要使用colspan属性来实现。
（2）语法：

<td colspan="单元格横跨的列数">

（3）说明：
跨列的时候要记得删掉同行中多余的单元格。

例子6-10
在td标签中，使用colspan属性，使单元格跨列显示，在浏览器中的显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="2">跨列</td>
        </tr>
        <tr>
            <td>第2行第1列单元格</td>
            <td>第2行第2列单元格</td>
        </tr>
        <tr>
            <td>第3行第1列单元格</td>
            <td>第3行第2列单元格</td>
        </tr>
    </table>
</body>
</html>

6.4.2单元格跨行rowspan

（1）单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。
（2）语法：

<td rowspan="单元格跨越的行数">

（3）说明：
跨行的时候要记得删掉多余的单元格。

例子6-11
在td标签中，使用rowspan属性，使单元格跨行显示，在浏览器中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td rowspan="2">第1行第1列单元格,第2行第1列单元格</td>
            <td>第1行第2列单元格</td>
        </tr>
        <tr>
            <td>第2行第2列单元格</td>
        </tr>
        <tr>
            <td>第3行第1列单元格</td>
            <td>第3行第2列单元格</td>
        </tr>
    </table>
</body>
</html>

6.5 表格结构

（1）还有一些标签是用来表示表格结构的，包括表首标签thead，表主体标签tbody以及表尾标签tfoot。这些成对出现的标签设置应用到表格里，用于整体规划表格的行列属性。下列罗列了表格结构的相关标签。

标签	描述
thead	定义表格的头部
tbody	定义表格的主体
tfoot	定义表格的尾部

例子6-12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>时间</th>
                <th>支出</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td>总计</td>
                <td>290</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>一月</td>
                <td>110</td>
            </tr>
            <tr>
                <td>二月</td>
                <td>100</td>
            </tr>
            <tr>
                <td>三月</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在这里插入图片描述

6.6 练习题

1.填空题
（1）表格由行，列和单元格组成，一般通过3个标签来创
建，分别是表格标签<table>，行标签<tr>和单元格标签
<td>。表格的各种属性都要在表格的开始标签<table>和
表格的结束标签</table>之间才有效。
（2）表格的边框可以很粗，也可以很细，可以使用border
属性来设置表格的边框效果。
（3）还有一些标签是用来表示表格结构的，包括表首标签
<thead>，表主体标签<tbody>以及表尾标签<tfoot>。这
些成对出现的标签设置应用到表格里，用于整体规划表格的
行列属性。
（4）使用rowspan属性可以合并同一列的相邻单元格，使
用colspan属性可以合并同一行的相邻单元格。

2.操作题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th> </th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td>下午</td>
                <td>线性代数</td>
                <td>大学物理</td>
                <td>电子电路</td>
                <td>马克思主义哲学</td>
                <td>心理学</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td rowspan="2">上午</td>
                <td>离散数学</td>
                <td>大学物理</td>
                <td>高数</td>
                <td>大学英语</td>
                <td>Web编程技术</td>
            </tr>
            <tr>
                <td>马克思主义哲学</td>
                <td>高数</td>
                <td>计算机基础</td>
                <td>高数</td>
                <td>物理实验</td>
            </tr>
        </tbody>
    </table>
</body>
</html>