第六节：连接、列表、表格样式_url表格怎嘛做-CSDN博客

本文链接：https://blog.csdn.net/qq_43220836/article/details/127085326

第六节：连接、列表、表格样式

1、连接

使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。在标签中使用了href属性来描述链接的地址。默认情况下，链接将以以下形式出现在浏览器中：一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

1.1、连接标签

a 标签是html连接标签（超链接）a 标签跳转有两种一种是页面跳转，一种是指定位置跳转。

页面跳转

<a href="url">链接文本</a>
// href 属性描述了链接的目标。
<a href="https://www.baidu.com/" target="_top">访问百度</a>
href:设置要跳转的连接地址或者跳转目标
target:设置连接的文档在何处打开
    _blank:新窗口
    _self：当前窗口打开
    parent:在父框架集中打开被链接文档
    _top:在整个窗口中打开被链接文档
    framename:在指定的框架中打开被链接文档

指定目标跳转

<a href="#title1">第一节</a>
// 指定跳转目标 进行跳转 好比word中的大纲
<h1 id="title1"></h1>

案例：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100vw;
            height: 100vh;
        }

        a {
            line-height: 30px;
            display: block;
            text-align: center;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com" target="_blank">访问百度</a>
    <!--  
        a 标签属性:
            href:设置要跳转的连接地址或者跳转目标
            target:设置连接的文档在何处打开
                _blank:新窗口
                _self：当前窗口打开
                parent:在父框架集中打开被链接文档
                _top:在整个窗口中打开被链接文档
                framename:在指定的框架中打开被链接文档
    -->
    <a href="#title1">第一节</a>
    <a href="#title2">第二节</a>
    <a href="#title3">第三节</a>
    <div>
        <h1 id="title1">第一节</h1>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <hr>
    </div>

    <div>
        <h1 id="title2">第二节</h1>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <hr>
    </div>

    <div>
        <h1 id="title3">第三节</h1>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <hr>
    </div>
</body>

</html>

1.2、连接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是：
a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

2、列表

列表分为三类，一种是有序列表，一种是无序列表，一种是自定义列表。无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记；有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于

标签。每个列表项始于
标签；自定义列表以
标签开始。每个自定义列表项以开始。每个自定义列表项的定义以
开始。

2.1、列表标签

2.1.1、无序列表

无序列表使用

标签
<ul>
    <li>无序列表第一项</li>
    <li>无序列表第二项</li>
    <li>无序列表第三项</li>
</ul>
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

2.1.2、有序列表

有序列表使用

标签
<ol>
    <li>有序列表第一项</li>
    <li>有序列表第二项</li>
    <li>有序列表第三项</li>
</ol>
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于
标签。每个列表项始于
标签。

2.1.3、自定义列表

自定义列表

标签 dt / dd
<dl>
    <dt>水果</dt>
    <dd>水果介绍</dd>
    <dt>家电</dt>
    <dd>家电介绍</dd>
</dl>
自定义列表以
标签开始。每个自定义列表项以开始。每个自定义列表项的定义以
开始。

案例：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

</head>

<body>
    <ul>
        <li>无序列表第一项</li>
        <li>无序列表第二项</li>
        <li>无序列表第三项</li>
    </ul>
    <hr>
    <ol>
        <li>有序列表第一项</li>
        <li>有序列表第二项</li>
        <li>有序列表第三项</li>
    </ol>
    <hr>
    <dl>
        <dt>水果</dt>
        <dd>水果介绍</dd>
        <dt>家电</dt>
        <dd>家电介绍</dd>
    </dl>
    <dl>
        <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>苹果</dd>
        <dt>家电</dt>
        <dd>电饭锅</dd>
        <dd>电磁炉</dd>
    </dl>
</body>

</html>

2.2、列表样式

CSS 列表属性有三种，设置不同的列表项标记为有序列表；设置不同的列表项标记为无序列表；设置列表标记为图像。在HTML 中有两类列表一种无序列表ul 列表项标记为特殊图形比如原点、方块等，有序列表ol 列表项标记为数字或字母，使用CSS可以进一步的样式，并可以使用图像标记项。列表样式主要有一下几种属性：

属性	属性描述
list-style	简写属性，用于把所有描述列表属性设置为一个声明中
list-style-image	将图片设置为列表项标志
list-style-position	设置列表中列表项标志的位置
list-style-type	设置列表项标志类型

2.2.1、设置列表项标记图像

list-style-image 属性使用图像来替换列表项的标记。

/* 设置列表项标记图像 */
ul {
    /* 设置的图像大小推荐为 ：10px 10px */
    list-style-image: url('./img/16.jpg');
}

/* 
    list-style-image 属性值
        URL	图像的路径。
        none	默认。无图形被显示。
        inherit	规定应该从父元素继承 list-style-image 属性的值。
*/

设置列表项标记图标还可以通过背景图片的方式来来实现。

/* 设置列表项标记图像 */
ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul>li {
    background-image: url('./img/16.jpg');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 0px 5px;
    padding-left: 15px;
}

/* 
    背景图实现方法：
        ul:
            设置列表类型为没有列表项标记
            设置填充和边距 0px（浏览器兼容性）
        ul 中所有 li:
            设置图像的 URL，并设置它只显示一次（无重复）
            您需要的定位图像位置（左 0px 和上下 5px）
            用 padding-left 属性把文本置于列表中
*/

2.2.2、设置列表项标志位置

list-style-position 属性指示如何相对于对象的内容绘制列表项标记。

/* 设置列表项图标位置 */
ul {
    list-style-position: inside;
}

/* 
    list-style-position 属性值
        inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
        outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
        inherit	规定应该从父元素继承 list-style-position 属性的值。
*/

2.2.3、设置列表项标记类型

list-style-type 属性设置列表项标记的类型。

/* list-style-type 属性设置列表项标记的类型。 */
ul {
    list-style-type: decimal-leading-zero;
}

/* 
    list-style-type 属性值
        none	无标记。
        disc	默认。标记是实心圆。
        circle	标记是空心圆。
        square	标记是实心方块。
        decimal	标记是数字。
        decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
        lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
        upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
        lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
        upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
        lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
        lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
        upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
        hebrew	传统的希伯来编号方式
        armenian	传统的亚美尼亚编号方式
        georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
        cjk-ideographic	简单的表意数字
        hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
        katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
        hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
        katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）
*/

2.2.4、设置列表项样式简写

list-style 简写属性在一个声明中设置所有的列表属性。

可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.

/* list-style-type 属性设置列表项标记的类型。 */
ul {
    list-style: square inside;
}

li {
    border: 1px solid red;
}

/* 
    list-style 属性值
        list-style-type	设置列表项标记的类型。
        list-style-position	设置在何处放置列表项标记。
        list-style-image	使用图像来替换列表项的标记。
        initial	将这个属性设置为默认值。
        inherit	规定应该从父元素继承 list-style 属性的值。
*/

案例：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        html,
        body {
            width: 100vw;
            height: 100vh;
        }

        /* 设置列表项标记图像 */
        /* 设置的图像大小推荐为 ：10px 10px */
        /* ul {
            list-style-image: url('./img/16.jpg');
        } */

        /* 设置列表项标记图像 */
        /* ul {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }

        ul>li {
            background-image: url('./img/16.jpg');
            background-size: 10px 10px;
            background-repeat: no-repeat;
            background-position: 0px 5px;
            padding-left: 15px;
        } */

        /* 设置列表项图标位置 */
        /* ul {
            list-style-position: inside;
        } */

        /* list-style-type 属性设置列表项标记的类型。 */
        /* ul {
            list-style-type: decimal-leading-zero;
        } */

        /* list-style-type 属性设置列表项标记的类型。 */
        ul {
            list-style: square inside;
        }

        li {
            border: 1px solid red;
        }

        /* 
            list-style 属性值
                list-style-type	设置列表项标记的类型。
                list-style-position	设置在何处放置列表项标记。
                list-style-image	使用图像来替换列表项的标记。
                initial	将这个属性设置为默认值。
                inherit	规定应该从父元素继承 list-style 属性的值。
        */
    </style>
</head>

<body>
    <ul>
        <li>无需列表样式1</li>
        <li>无需列表样式2</li>
        <li>无需列表样式3</li>
    </ul>
</body>

</html>

3、表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

3.1、表格标签

表格标签主要又一下标签组成：

标签

标签描述

定义表格

定义表格的表头

定义表格元素

定义表格标题

定义表格列的组

定义表格列的数据

定义表格页眉

定义表格主体

定义表格页脚

标签定义 HTML 表格,个 HTML 表格包括
元素，一个或多个元素定义表格行，、、、以及元素。

元素。
元素定义表头，元素定义表格单元。更复杂的 HTML 表格也可能包括
、
标签属性：

属性值描述
$\color{#f00}{align}$ left、center、right HTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式。
$\color{#f00}{bgcolor}$ rgb(x,x,x)、#xxxxxx、colorname HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色。
$\color{#f00}{border}$ 1、“” HTML5 不支持。规定表格单元是否拥有边框。
$\color{#f00}{cellpadding}$ pixels HTML5 不支持。规定单元边沿与其内容之间的空白。
$\color{#f00}{cellspacing}$ pixels HTML5 不支持。规定单元格之间的空白。
$\color{#f00}{frame}$ void、above、below、hsides、lhs、rhs、vsides、box、border HTML5 不支持。规定外侧边框的哪个部分是可见的。
$\color{#f00}{rules}$ none、groups、rows、cols、all HTML5 不支持。规定内侧边框的哪个部分是可见的。
$\color{#f00}{summary}$ text HTML5 不支持。规定表格的摘要。
$\color{#f00}{width}$ pixels、% HTML5 不支持。规定表格的宽度。

标签定义 HTML 表格中的行。一个元素包含一个或多个或元素。
tr 标签属性

属性值描述
$\color{#f00}{align}$ right、left、center、justify、char HTML5 不支持。定义表格行的内容对齐方式。
$\color{#f00}{bgcolor}$ rgb(x,x,x)、#xxxxxx、colorname HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
$\color{#f00}{char}$ character HTML5 不支持。规定根据哪个字符来进行文本对齐。
$\color{#f00}{charoff}$ number HTML5 不支持。规定第一个对齐字符的偏移量。
$\color{#f00}{valign}$ top、middle、bottom、baseline HTML5 不支持。规定表格行中内容的垂直对齐方式。
标签定义 HTML 表格中的表头单元格。元素中的文本通常呈现为粗体并且居中。元素中的文本通常是普通的左对齐文本。
th 标签属性、td 标签属性

属性值描述
$\color{red}{abbr}$ text HTML5 不支持。规定表头单元格中内容的缩写版本。
$\color{#f00}{align}$ left、right、center、justify、char HTML5 不支持。规定表头单元格内容的水平对齐方式。
$\color{#f00}{axis}$ category_name HTML5 不支持。对表头单元格进行分类。
$\color{#f00}{bgcolor}$ rgb(x,x,x)、#xxxxxx、colorname HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的背景颜色。
$\color{#f00}{char}$ character HTML5 不支持。规定根据哪个字符来进行内容的对齐。
$\color{#f00}{charoff}$ number HTML5 不支持。规定对齐字符的偏移量。
colspan number 规定表头单元格可横跨的列数。
headers header_id 规定与表头单元格相关联的一个或多个表头单元格。
$\color{#f00}{height}$ pixels、% HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的高度。
$\color{#f00}{nowrap}$ nowrap HTML5 不支持。HTML 4.01 已废弃。规定表头单元格中的内容是否折行。
rowspan number 规定表头单元格可横跨的行数。
scope col、colgroup、row、rowgroup 规定表头单元格是否是行、列、行组或列组的头部。
$\color{#f00}{valign}$ top、middle、bottom、baseline HTML5 不支持。规定表头单元格内容的垂直排列方式。
$\color{#f00}{width}$ pixels、% HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的宽度。
标签定义表格的标题。标签必须直接放置到标签之后。您只能对每个表格定义一个标题。
caption 标签属性

属性值描述
$\color{#f00}{align}$ left、right、top、bottom HTML5 不支持。HTML 4.01 已废弃。定义标题的对齐方式。

标签用于对表格中的列进行组合，以便对其进行格式化。通过使用标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。**注释：**只能在元素之内，在任何一个、、、元素之前使用标签。

标签规定了元素内部的每一列的列属性。通过使用标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
标签属性
元素之后，在任何一个
元素相关的内容的水平对齐方式。元素相关的内容。元素应该横跨的列数。元素相关的内容的垂直对齐方式。element
属性值描述
$\color{#f00}{align}$ left、right、center、justify、char HTML5 不支持。规定与
$\color{#f00}{char}$ character HTML5 不支持。规定根据哪个字符来对齐与
$\color{#f00}{charoff}$ number HTML5 不支持。规定第一个对齐字符的偏移量。
span number 规定
$\color{#f00}{valign}$ top、middle、bottom、baseline HTML5 不支持。规定与
$\color{#f00}{width}$ %、pixels、relative_length HTML5 不支持。Specifies the width of a

标签用于组合 HTML 表格的表头内容。元素应该与和元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。标签必须被用在以下情境中：作为元素的子元素，出现在元素之后，、和元素之前。

、和元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。
属性
、
元素中内容的对齐方式。元素中内容根据哪个字符来对进行文本对齐。元素中内容的第一个对齐字符的偏移量。元素中内容的垂直对齐方式。
属性值描述
$\color{#f00}{align}$ left、right、center、justify、char HTML5 不支持。定义
$\color{#f00}{char}$ character HTML5 不支持。规定
$\color{#f00}{charoff}$ number HTML5 不支持。规定
$\color{#f00}{valign}$ top、middle、bottom、baseline HTML5 不支持。规定

、
	元素。
元素定义表头，	元素定义表格单元。更复杂的 HTML 表格也可能包括

属性	值	描述
$\color{#f00}{align}$	left、center、right	HTML5 不支持。HTML 4.01 已废弃。规定表格相对周围元素的对齐方式。
$\color{#f00}{bgcolor}$	rgb(x,x,x)、#xxxxxx、colorname	HTML5 不支持。HTML 4.01 已废弃。规定表格的背景颜色。
$\color{#f00}{border}$	1、“”	HTML5 不支持。规定表格单元是否拥有边框。
$\color{#f00}{cellpadding}$	pixels	HTML5 不支持。规定单元边沿与其内容之间的空白。
$\color{#f00}{cellspacing}$	pixels	HTML5 不支持。规定单元格之间的空白。
$\color{#f00}{frame}$	void、above、below、hsides、lhs、rhs、vsides、box、border	HTML5 不支持。规定外侧边框的哪个部分是可见的。
$\color{#f00}{rules}$	none、groups、rows、cols、all	HTML5 不支持。规定内侧边框的哪个部分是可见的。
$\color{#f00}{summary}$	text	HTML5 不支持。规定表格的摘要。
$\color{#f00}{width}$	pixels、%	HTML5 不支持。规定表格的宽度。

属性	值	描述
$\color{#f00}{align}$	right、left、center、justify、char	HTML5 不支持。定义表格行的内容对齐方式。
$\color{#f00}{bgcolor}$	rgb(x,x,x)、#xxxxxx、colorname	HTML5 不支持。HTML 4.01 已废弃。规定表格行的背景颜色。
$\color{#f00}{char}$	character	HTML5 不支持。规定根据哪个字符来进行文本对齐。
$\color{#f00}{charoff}$	number	HTML5 不支持。规定第一个对齐字符的偏移量。
$\color{#f00}{valign}$	top、middle、bottom、baseline	HTML5 不支持。规定表格行中内容的垂直对齐方式。

属性	值	描述
$\color{red}{abbr}$	text	HTML5 不支持。规定表头单元格中内容的缩写版本。
$\color{#f00}{align}$	left、right、center、justify、char	HTML5 不支持。规定表头单元格内容的水平对齐方式。
$\color{#f00}{axis}$	category_name	HTML5 不支持。对表头单元格进行分类。
$\color{#f00}{bgcolor}$	rgb(x,x,x)、#xxxxxx、colorname	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的背景颜色。
$\color{#f00}{char}$	character	HTML5 不支持。规定根据哪个字符来进行内容的对齐。
$\color{#f00}{charoff}$	number	HTML5 不支持。规定对齐字符的偏移量。
colspan	number	规定表头单元格可横跨的列数。
headers	header_id	规定与表头单元格相关联的一个或多个表头单元格。
$\color{#f00}{height}$	pixels、%	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的高度。
$\color{#f00}{nowrap}$	nowrap	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格中的内容是否折行。
rowspan	number	规定表头单元格可横跨的行数。
scope	col、colgroup、row、rowgroup	规定表头单元格是否是行、列、行组或列组的头部。
$\color{#f00}{valign}$	top、middle、bottom、baseline	HTML5 不支持。规定表头单元格内容的垂直排列方式。
$\color{#f00}{width}$	pixels、%	HTML5 不支持。HTML 4.01 已废弃。规定表头单元格的宽度。

属性	值	描述
$\color{#f00}{align}$	left、right、top、bottom	HTML5 不支持。HTML 4.01 已废弃。定义标题的对齐方式。

属性	值	描述
$\color{#f00}{align}$	left、right、center、justify、char	HTML5 不支持。规定与
$\color{#f00}{char}$	character	HTML5 不支持。规定根据哪个字符来对齐与
$\color{#f00}{charoff}$	number	HTML5 不支持。规定第一个对齐字符的偏移量。
span	number	规定
$\color{#f00}{valign}$	top、middle、bottom、baseline	HTML5 不支持。规定与
$\color{#f00}{width}$	%、pixels、relative_length	HTML5 不支持。Specifies the width of a

属性	值	描述
$\color{#f00}{align}$	left、right、center、justify、char	HTML5 不支持。定义
$\color{#f00}{char}$	character	HTML5 不支持。规定
$\color{#f00}{charoff}$	number	HTML5 不支持。规定
$\color{#f00}{valign}$	top、middle、bottom、baseline	HTML5 不支持。规定

案例

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        html,
        body {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <table border="1">
        <caption>报价单</caption>
        <colgroup>
            <col style="background-color: yellow;">
            <col style="background-color: green;">
            <col style="background-color: red;">
        </colgroup>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxx</td>
                <td>$100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>yyy</td>
                <td>$150</td>
                <td>80</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总价</td>
                <td>$22000</td>
                <td>180</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

3.2、表格样式

使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框，使用border属性。请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框，使用 border-collapse属性。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：Width和height属性定义表格的宽度和高度。表格中的文本对齐和垂直对齐属性。text-align属性设置水平对齐方式，向左，右，或中心：垂直对齐属性设置垂直对齐，比如顶部，底部或中间：如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：下面的例子指定边框的颜色，和th元素的文本和背景颜色：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="xiaoge-education">
    <meta name="Description" content="this is a chapter of xiaoge-education page">
    <title>xiaoge-education</title>

    <style>
        html,
        body {
            width: 100vw;
            height: 100vh;
        }

        table {
            width: 300px;
            border-collapse: collapse;
            /* 
                border-collapse 边框分隔
                    collapse 不分隔
                    separate 分隔
                border-spacing 边框间距
            */
        }

        table,
        th,
        td {
            border: 1px solid blue;
        }

        th {
            height: 30px;
            background-color: green;
            color: white;
        }

        td {
            height: 20px;
            vertical-align: bottom;
            padding: 0 15px;
        }
    </style>
</head>
<!-- 

 -->

<body>
    <table border="1">
        <caption>报价单</caption>
        <colgroup>
            <col style="background-color: yellow;">
            <col style="background-color: green;">
            <col style="background-color: red;">
        </colgroup>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxx</td>
                <td>$100</td>
                <td>100</td>
            </tr>
            <tr>
                <td>yyy</td>
                <td>$150</td>
                <td>80</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总价</td>
                <td colspan="2">$22000</td>
                <!-- 
                    标签属性colspan="" 合并列
				        rowspan="" 合并行
                 -->
            </tr>
        </tfoot>
    </table>
</body>

</html>