前端学习笔记之——表格元素

最新推荐文章于 2022-02-24 16:50:25 发布
最新推荐文章于 2022-02-24 16:50:25 发布
阅读量723 收藏
点赞数
分类专栏： 前端 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36879493/article/details/118033333
版权

表格元素

1、生成基本的表格

有三个元素是每个表格都必须要有的：table、tr 和 td。

元素table
元素类型流
允许具备的父元素任何可以包含流元素的元素
局部属性border
内容caption、colgroup、thead、tbody、tfoot、tr、th 和 td 元素
标签用法开始标签和结束标签
习惯样式table { display: table; border-collapse: separate;
border-spacing: 2px; border-color: gray; }

下一个核心表格元素是 tr，它表示表格中的行。HTML 表格基于行而不是列，每个行必须分别标记。

元素tr
元素类型无
允许具备的父元素table、thead、tfoot 和 tbody 元素
局部属性无
内容一个或多个 td 或 th 元素
标签用法开始标签和结束标签
习惯样式tr { display: table-row; vertical-align: inherit;
border-color: inherit;}

三个核心元素中的最后一个是 td，它表示表格中的单元格。

元素td
元素类型无
允许具备的父元素tr 元素
局部属性colspan、rowspan、headers
内容流内容
标签用法开始标签和结束标签
习惯样式td { display: table-cell; vertical-align: inherit; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
        </table>
    </body>
</html>

此例定义了一个两行（分别由两个 tr 元素表示）的表格。每行有三列，一个 td 元素代表一列。td 元素可以包含任何流内容，但本例只使用了文字。

浏览器会调整行与列的尺寸以维持表格的形式。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <td>Apples</td>
                <td>Green</td>
                <td>Medium</td>
            </tr>
            <tr>
                <td>Oranges</td>
                <td>Orange</td>
                <td>Large</td>
            </tr>
            <tr>
                <td>Pomegranate</td>
                <td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

2、添加表头单元格

th 元素表示表头的单元格，它可以用来区分数据和对数据的说明。

元素th
元素类型无
允许具备的父元素tr 元素
局部属性colspan、rowspan、scope 和 headers
内容短语内容
标签用法开始标签和结束标签
习惯样式th { display: table-cell; vertical-align: inherit;
font-weight: bold; text-align: center; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table>
            <tr>
                <th>Rank</th><th>Name</th>
                <th>Color</th><th>Size</th>
            </tr>
            <tr>
                <th>Favorite:</th>
                <td>Apples</td><td>Green</td><td>Medium</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th>
                <td>Oranges</td><td>Orange</td><td>Large</td>
            </tr>
            <tr>
                <th>3rd Favorite:</th>
                <td>Pomegranate</td><td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

3、为表格添加结构

在设置表格样式的时候就会发现，要区别全是 th 元素的行中的 th 元素和与数据单元格混在一行中的 th 元素并不容易。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            tr > th { text-align:left; background:grey; color:white}
            tr > th:only-of-type {text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
            </tr>
            <tr>
                <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
            </tr>
            <tr>
                <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
            </tr>
            <tr>
                <th>3rd Favorite:</th><td>Pomegranate</td><td>A kind of greeny-red</td>
                <td>Varies from medium to large</td>
            </tr>
        </table>
    </body>
</html>

此例使用了两个选择器。一个选择器匹配所有 th 元素，另一个只匹配 tr 元素的子元素中唯一的 th 元素。

要想灵活处理这个问题，可以使用 thead、tbody 和 tfoot 元素。

3.1、表示表头和表格主题

tbody 元素表示构成表格主体的全体行——不包括表头行和表脚行（它们分别由 thead 和 tfoot 元素表示）。

元素tbody
元素类型无
允许具备的父元素table 元素
局部属性无
内容零个或多个 tr 元素
标签用法开始标签和结束标签
习惯样式tbody { display: table-row-group;
vertical-align: middle; border-color: inherit; }

thead 元素用来标记表格的标题行。

元素thead
元素类型无
允许具备的父元素table 元素
局部属性无
内容零个或多个 tr 元素
标签用法开始标签和结束标签
习惯样式thead { display: table-header-group;
vertical-align: middle; border-color: inherit; }

如果没有 thead 元素的话，所有 tr 元素都会被视为表格主体的一部分。下面代码在示例表格中添加了 thead 和 tbody 元素，并且相应地使用了更为灵活的 CSS 选择器。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td>A kind of greeny-red</td><td>Varies from medium to large</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

3.2、添加表脚

tfoot 元素用来标记组成表脚的行。

元素tfoot
元素类型无
允许具备的父元素table 元素
局部属性无
内容零个或多个 tr 元素
标签用法开始标签和结束标签
习惯样式tfoot { display: table-footer-group;
vertical-align: middle; border-color: inherit; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
                </tr>                
            </tfoot>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td>A kind of greeny-red</td><td>Varies from medium to large</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

4、制作不规则表格

不规则表格要用到 td 和 th 元素中的 colspan 和 rowspan 属性。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

想要一个单元格纵跨多行要用 rowspan 属性，为该属性设置的值就是所跨行数。同样，想让一个单元格横跨多列要用 colspan 属性。

colspan 和 rowspan 属性应该用在要占据的网格左上角那个单元格上。正常情况下位于它所跨越的位置上的 td 和 th 元素此时则被省略。

5、把表头与单元格关联起来

td 和 th 元素都定义了 header 属性，它可以供屏幕阅读器和其他残障辅助技术用来简化对表格的处理。header 属性的值可被设置为一个或多个 th 单元格的 id 属性值。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            thead [colspan], tfoot [colspan] {text-align:center; }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th id="rank">Rank</th>
                    <th id="name">Name</th>
                    <th id="color">Color</th>
                    <th id="sizeAndVotes" colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th id="first" headers="rank">Favorite:</th>
                    <td headers="name first">Apples</td>
                    <td headers="color first">Green</td>
                    <td headers="sizeAndVote first">Medium</td>
                    <td headers="sizeAndVote first">500</td>
                </tr>
                <tr>
                    <th id="second" headers="rank">2nd Favorite:</th>
                    <td headers="name second">Oranges</td>
                    <td headers="color second">Orange</td>
                    <td headers="sizeAndVote second">Large</td>
                    <td headers="sizeAndVote second">450</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

此例为 thead 和 tbody 中的每一个 th 元素都设置了全局 id 属性值。tbody 中的每一个 td 和 th 元素都通过设置 header 属性将相应单元格与列表头关联起来。其中 td 元素还指定了所关联的行表头（出现在第一列中的表头）。

6、为表格添加标题

caption 元素可以用来为表格定义一个标题并将其余表格关联起来。

元素caption
元素类型无
允许具备的父元素table 元素
局部属性无
内容流内容（但不能是 table 元素）
标签用法开始标签和结束标签
习惯样式caption { display: table-caption; text-align: center; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
            caption {font-weight: bold; font-size: large; margin-bottom:5px}
        </style>
    </head>
    <body>
        <table>
            <caption>Results of the 2011 Fruit Survey</caption>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

一个表格只能包含一个 caption 元素。它不必是表格的第一个子元素，但是无论定义在什么位置，它总会显示在表格的正上方。

7、处理列

HTML 中的表格是基于行的。单元格的定义都要放在 tr 元素，而表格则是一行一行地组建出来的。因此对列应用样式有点不方便，对于包含不规则单元格的表格更是如此。这个问题的解决方法是使用 colgroup 和 col 元素。colgroup 代表一列。

元素colgroup
元素类型无
允许具备的父元素table 元素
局部属性span
内容零个或多个 col 元素（只能未设置 span 属性时才能使用）
标签用法开始标签和结束标签
习惯样式colgroup { display: table-column-group; }
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
            caption {font-weight: bold; font-size: large; margin-bottom:5px}
            #colgroup1 {background-color: red}
            #colgroup2 {background-color: green; font-size:small}
        </style>
    </head>
    <body>
        <table>
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1" span="3"/>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

此例中定义了两个 colgroup 元素。span 属性指定了 colgroup 元素负责的列数。代码中第一个 colgroup 负责表格中的前三列，另一个 colgroup 负责剩余两列。两个 colgroup 元素都设置了 id 属性，并以其 id 值为选择器定义了相应的 CSS 样式。

在这里插入图片描述

该图揭示了 colgroup 元素使用中的一些重要特点。首先，应用到 colgroup 上的 CSS 样式在具体程度上低于直接应用到 tr、td 和 th 元素上的样式。从应用到 thead、tfoot 和第一列 th 元素上的样式未受到 colgroup 元素上的样式的影响可以看出这一点。要是把针对 colgroup 元素的样式之外的样式删除掉，那么所有单元格都会受到 colgroup 样式的影响。

第二，不规则单元格被计入起始列。从表格的第三行可以看出这一点。在此行中有一个应用到了第一种样式的单元格扩展到了由另一个 colgroup 元素负责的区域。

最后，colgroup 元素的影响范围覆盖了列中所有的单元格，包括那些位于 thead 和 tfoot 元素中的单元格，不管它们是用 th 还是 td 元素定义的。colgroup 元素的特别之处就在于它影响到的元素并未包含在其内部。因此该元素无法用做更具体的选择器的基础（如 #colgroup1 > td 这个选择器不会有任何匹配元素）。

7.1、表示个别的列

也可以不用 colgroup 元素的 span 属性，改用 col 元素指定组中的各列。

元素col
元素类型无
允许具备的父元素colgroup 元素
局部属性span
内容无
标签用法虚元素形式
习惯样式col { display: table-column; }

使用 col 元素的好处在于能够获得更多的控制权。有了它，既能对一组列应用样式，也能对该组中个别的列应用样式。col 元素位于 colgroup 元素之中，每个 col 元素代表列组中的一列。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <style>
            thead th, tfoot th { text-align:left; background:grey; color:white}
            tbody th { text-align:right; background: lightgrey; color:grey}
            [colspan], [rowspan] {font-weight:bold; border: medium solid black}
            thead [colspan], tfoot [colspan] {text-align:center; }
            caption {font-weight: bold; font-size: large; margin-bottom:5px}
            #colgroup1 {background-color: red}
            #col3 {background-color: green; font-size:small}
        </style>
    </head>
    <body>
        <table>
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

可以用 col 元素的 span 属性让一个 col 元素代表几列。不用 span 属性的 col 元素只代表一列。此例分别为一个 colgroup 元素和其中的一个 col 元素设定了样式。

在这里插入图片描述

8、设置表格边框

table 元素定义了 border 属性。使用这个属性就是告诉浏览器这个表格是用来表示格式数据而不是用来布置其他元素的。大多数浏览器见到 border 属性后会在表格和每个单元格周围绘出边框。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    </head>
    <body>
        <table border="1">
            <caption>Results of the 2011 Fruit Survey</caption>
            <colgroup id="colgroup1">
                <col id="col1And2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"/>
            <thead>
                <tr>
                    <th>Rank</th><th>Name</th><th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Favorite:</th><td>Apples</td><td>Green</td>
                    <td>Medium</td><td>500</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td>
                    <td>Large</td><td>450</td>
                </tr>
                <tr>
                    <th>3rd Favorite:</th><td>Pomegranate</td>
                    <td colspan="2" rowspan="2">
                        Pomegranates and cherries can both come in a range of colors 
                        and sizes. 
                    </td>
                    <td>203</td>
                </tr>
                <tr>
                    <th rowspan="2">Joint 4th:</th>
                    <td>Cherries</td>
                    <td rowspan="2">75</td>
                </tr>
                <tr>
                    <td>Pineapple</td>
                    <td>Brown</td>
                    <td>Very Large</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
                </tr>                
            </tfoot>
        </table>
    </body>
</html>

border 属性的值必须设置为 1 或空字符串（“”）。该属性并不控制边框的样式，那是 CSS 的工作。

在这里插入图片描述

尽管 border 属性会让浏览器为表格和每个单元格添加边框，还是需要用 CSS 选择器分别针对各种元素重设边框样式。在设计 CSS 选择器时可用的办法有很多：表格的外边框可以通过 table 元素控制；表头、表格主体和表脚可以分别通过 thead、tbody 和 tfoot 元素控制；列可以通过 colgroup 和 col 元素控制；各个单元格可以通过 th 和 td 元素控制。而且，就算别的方法都不管用，至少还可以使用全局属性 id 和 class 确定目标。

前丨尘忆·梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android学习笔记之——Content Providers
01-03
之前博文《 Android学习笔记之——Android Studio的安装（3.6版本）、Java的基本语法及Android的概述 》曾经介绍过android有四大组件。本博文学习一下Content Providers（内容提供器） 目录 Android运行时 ...
前端HTML中表格元素介绍
金鳞踏雨
11-29 365
随着前端技术的发展，HTML原有的很多写法渐渐被CSS或JavaScript替代，在这里介绍的表格元素也是如此（div）。 此篇博文仅为本人学完HTML中的table标签的学习总结，若有错误望在评论区提出，本人很菜，勿喷2333~~~ <table> 定义表格 <tr> 定义表格的行 <th> 定义表格的表头 <td&g...
web前端——表单元素
xishaoguo的博客
03-07 1729
表单：就是我们在注册帐号时所填写信息的地方。比如：帐号密码输入框，生日下拉选择，性别单选，按钮等。&lt;input&gt;标签：就是我们填写东西所需要的容器，而改变它的类型就可以变成不同的容器。&lt;input type="text"&gt;文本输入框 可以加上value属性设置默认值，也可以加上placeholder属性进行提示文字设置。&lt;input type="password"&g...
前端学习之表单元素
HJHAlone的博客
02-24 448
1.表单元素 input元素
前端开发 表格元素 单元格的合并 0229
pyhui的技术博客
02-29 1021
学习目标 表格的语法 表格相关属性 table的属笥 关于表格合并的效果
HTML（九）表格元素
Oliver尹的博客
06-17 289
&lt;table&gt;表示二维数据，但是不应该做布局使用，早起使用table布局，但是现在即使不用h5的新标签，那么也应该使用div布局   &lt;caption&gt;&lt;/caption&gt;：表示表格的标题 &lt;colgroup&gt;&lt;/colgroup&gt;：表示表格的一组列表 span：表示列数 &lt;colgroup span=2 width=50...
Python学习笔记——大数据之SPARK核心
02-24
本文来自于csdn，文章讲解RDD的特点，RDD操作函数相关，穿插案例辣酱得段子，带大家理解MapReduce，通过哈姆雷特单词分析案例进行深度剖析。RDD（ResilientDistributedDatasets弹性分布式数据集），是spark中最重要...
ROS学习笔记之——多机器人探索环境
01-06
本博文是基于这个ROS软件包（https://github.com/hrnr/m-explore）的学习笔记 目录 multi robot exploration nav_msgs/OccupancyGrid  map_msgs/OccupancyGridUpdate move_base multirobot_map_merge 参考资料 ...
学习笔记之——基于VScode remote的SSH
01-09
对于之前博客《ROS实验笔记之——多turtlebot机器人运控实验》中提到的多机器人运控。关掉机器人一段时间后重启，会发现机器人的IP地址好像发生了变化。如果每次都需要像博客《ROS中机器人与电脑的网络配置》那样...
HHTP协议——简单的 HTTP 协议
前尘忆梦的博客
07-06 3904
简单的 HTTP 协议 1、通过请求和响应的交换达成通信 下面是从客户端发送给某个 HTTP 服务器端的请求报文中的内容。 GET /index.htm HTTP/1.1 Host: hackr.jp 起始行开头的 GET 表示请求访问服务器的类型，称为方法（method）。随后的字符串 /index.htm 指明了请求访问的资源对象，也叫做请求 URI（request-URL）。最后的 HTTP/1.1，即 HTTP 的版本号，用来提示客户端使用的 HTTP 协议功能。 请求报文是由请求方法、请求 U
前端学习笔记之——表单
前尘忆梦的博客
06-19 1304
表单 1、制作基本的表单 制作一个基本的表单需要三个元素：form、input 和 button 元素。 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta name="author" content="Adam Freeman"/> <meta name="description" content="A si
前端学习笔记之——使用 Document 对象
前尘忆梦的博客
06-30 1257
使用 Document 对象 1、使用 Document 元数据 Document 对象的用途之一是向你提供关于文档的信息，下表介绍了用来获取文档元数据的属性。 属性 说明 返回 characterSet 返回文档的字符集编码。这是一个只读属性 字符串 charset 获取或设置文档的字符集编码 字符串 compatMode 获取文档的兼容性模式 字符串 cookie 获取或设置当前文档的 cookie 字符串 defaultCharset 获取浏览器所使用的默认字符编码 字
前端学习笔记之——定制 input 元素
前尘忆梦的博客
06-20 1023
定制 input 元素 1、用 input 元素输入文字 type 属性设置为 text 的 input 元素在浏览器中显示为一个单行文本框。这是默认形式。下表罗列了可用于这种类型的各种属性： 属性 说明 dirname 指定元素内容文字方向的名称 list 指定为文本框提供建议值的 datalist 元素，其值为 datalist 元素的 id 值 maxlength 设定用户在文本框中输入的字符的最大数目 pattern 指定一个用于输入验证的正则表达式 placehol
前端学习笔记之——使用 Window 对象
前尘忆梦的博客
07-02 1021
使用 Window 对象 1、获取 Window 对象 可以用两种方式获得 Window 对象。正规的 HTML5 方式是在 Document 对象上使用 defaultView 属性。另一种方法是使用所有浏览器都支持的全局变量 window。 <!DOCTYPE HTML> <html> <head> <title>Example</title> </head> <body id="bod
前端学习笔记之——标记文字
前尘忆梦的博客
06-08 930
标记文字 1、生成超链接 超链接是 HTML 中的关键特性，是用户赖以在内容中（在同一文档中和不同页面间）导航的基础。超链接用 a 元素生成。 元素 a 元素类型 包含短语内容时被视为短语元素，包含流内容时被视为流元素 允许具有的父元素 可以包含短语元素的任何元素 局部属性 href、hrelang、media、rel、target、type 内容 短语内容和流元素 标签用法 开始标签和结束标签 习惯样式 a:link, a:visited{color:blue;text
前端学习笔记之——使用边框和背景
前尘忆梦的博客
06-24 776
使用边框和背景 1、应用边框样式 简单边框有三个关键属性：border-width、border-style 和 border-color。 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta name="author" content="Adam Freeman"/> <meta name="descript
前端学习笔记之——设置文本样式
前尘忆梦的博客
06-28 636
设置文本样式 1、应用基本文本样式 1.1、对齐文本 有好几个属性可以用来设计文本内容的对齐方式。 属性 说明 值 text-align 指定文本块的对齐方式 startendleftrightcenterjustify text-justify 如果 text-justify 属性使用了 justify 值，则该值会指定对齐问文本的规则 text-align 属性相当简单，不过，需要注意的一点是：可以将文本对齐到显式命名的某个边界（使用 left 或者 right 值），或者对齐
前端学习笔记之——使用 CSS 选择器（二）
前尘忆梦的博客
06-23 611
使用 CSS 选择器（二） 1、使用结构性伪类选择器 使用结构性伪类选择器能够根据元素在文档中的位置选择元素。这类选择器都有一个冒号字符前缀（:），例如 :empty。它们可以单独使用，也可以跟其他选择器组合使用，如 p:empty。 1.1、使用根元素选择器 :root 选择器匹配文档中的根元素。它可能是用得最少的一个伪类选择器，因为总是返回 html 元素。 选择器 :root 匹配 选择文档中的根元素，总是返回 html 最低支持 CSS 版本 3 <!DOCTYPE H
layui表格监听全选_layui学习笔记——监听表格复选框选择
最新发布
05-26
需要注意的是，由于表格是动态生成的，所以需要使用layui的form.render()方法重新渲染表单元素。 ``` layui.use(['table', 'form'], function(){ var table = layui.table, form = layui.form; // 监听复选框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值