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

最新推荐文章于 2024-05-25 13:49:08 发布
最新推荐文章于 2024-05-25 13:49:08 发布
阅读量815 收藏
点赞数
分类专栏： 前端 文章标签： 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 确定目标。

前丨尘忆·梦
关注
专栏目录
前端学习笔记——table表格的创建Html基础
asdfghjilp的博客
04-17 1198
文章目录一、table数据表格的基础创建二、table表格的相关属性三 、table tr td属性设置 一、table数据表格的基础创建 <table> <!-- 创建表格 --> <tr> <!-- tr 表示行 --> <td>1</td> <!-- td表示列 --> <td>2</td> </tr> <tr>
web前端学习笔记——表格
weixin_46493903的博客
07-31 242
一、表格基础 标签：table、tr、td、th（table>tr>td） table:表格，定义整个表格的大结构，可以设置边框属性（属性值：数字） tr：table rows，表格的行，定义表格由多少行组成 td：table data，表格数据，表格单元格，定义每一行有多少个单元格 <table border="2"> <tr> <td>1-1</td> <td>1-
前端HTML中表格元素介绍
金鳞踏雨
11-29 384
随着前端技术的发展，HTML原有的很多写法渐渐被CSS或JavaScript替代，在这里介绍的表格元素也是如此（div）。 此篇博文仅为本人学完HTML中的table标签的学习总结，若有错误望在评论区提出，本人很菜，勿喷2333~~~ <table> 定义表格 <tr> 定义表格的行 <th> 定义表格的表头 <td&g...
web前端——表单元素
xishaoguo的博客
03-07 1770
表单：就是我们在注册帐号时所填写信息的地方。比如：帐号密码输入框，生日下拉选择，性别单选，按钮等。&lt;input&gt;标签：就是我们填写东西所需要的容器，而改变它的类型就可以变成不同的容器。&lt;input type="text"&gt;文本输入框 可以加上value属性设置默认值，也可以加上placeholder属性进行提示文字设置。&lt;input type="password"&g...
前端学习之表单元素
HJHAlone的博客
02-24 477
1.表单元素 input元素
前端开发 表格元素 单元格的合并 0229
pyhui的技术博客
02-29 1061
学习目标 表格的语法 表格相关属性 table的属笥 关于表格合并的效果
HTML（九）表格元素
Oliver尹的博客
06-17 319
&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...
Web前端学习笔记——HTML基础.docx
11-22
Web 前端学习笔记——HTML 基础 本文主要介绍了 Web 前端学习笔记——HTML 基础相关知识点，涵盖了浏览器内核、Web 标准、HTML 语言等方面。 一、浏览器内核 浏览器内核是指浏览器核心引擎，负责解析和渲染网页。...
Java中jqGrid 学习笔记整理——进阶篇(二)
09-02
在本篇Java中jqGrid的学习笔记整理中，我们将聚焦于jqGrid与后台Java服务的数据交互。jqGrid是一款强大的JavaScript库，用于创建动态、交互式的表格，而这里的进阶篇(二)将涉及到如何通过Java后端来提供数据支持。 ...
前端学习笔记——Ajax
lxy95512的博客
03-10 1387
URL地址 URL地址的概念 URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。 URL地址的组成部分 URL地址一般由三部组成: ①客户端与服务器之间的通信协议 ②存有该资源的服务器名称 ③资源在服务器上具体的存放位置 客户端与服务器的通信过程 客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。 如果要在网页中请
HTML 表格table tr td、表头标题、表结构、合并单元格
七七的博客
03-04 1万+
表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整,可读性非常好。 特别是后台展示数据的时候,能够熟练运用表格就显得很重要。 一个清爽简约的表格能够把繁杂的数据表现得很有条理。 表格不是用来布局页面的，而是用来展示数据的。 <table> <tr> <td>单元格内的文字</td> </tr> </...
html:table属性以及html简单合并单元格应用
YangLu888
10-03 4226
html合并单元格的简单应用以及html的table属性
el-table设置表头背景色tr间距和tr背景色
热门推荐
qq_40576178的博客
09-18 2万+
1、设置表头背景色，在el-table标签上添加header-cell-style :header-cell-style="{background:'#000'}" 2、设置除表格内容的每行行高，在el-table标签上添加row-style :row-style="{height:80+'px'}" 3、设置表头文字样式 ::v-deep .el-table__header-wrapper { thead { th{ div{ font-weight: 700;
【前端学习笔记——HTML】
weixin_45164294的博客
02-11 2033
HTML 资料： 网页的语义结构 - HTML 教程 - 网道 (wangdoc.com) 1.格式 tag就是标签，标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。 注意首和尾的格式 有一些标签没有尾，这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际应用中，它们主要用来提示浏览器，做一些特别处理。 tag种类极多，所有tag介绍：HTML elements reference - HTML: HyperText Markup
【前端】el-table组件结合插槽的表格框架及父组件分页使用
洛尧的博客
11-28 1981
用插槽实现表格列样式自定义；如果是最后一列且是每行相同的操作列，还可以简单地用v-if传值判断实现。表格样式：第一列内容靠左，其余列内容居中；表格body超出滚动。
vue给table中的子级tr设置样式
最新发布
weixin_56561648的博客
05-25 335
el-table表格
elementui el-table 如何为tr添加css以及在多选时限制选择数量
susjdyr的博客
01-16 2054
element table 为tr添加css 限制多选数量
前端学习第二天——html跨行跨列
weixin_42108855的博客
06-02 305
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客
前端从零开始学习笔记（七）-----table表格的使用
m0_61656944的博客
01-05 1694
表格的创建： 快捷键：table>tr*2>td*3 其中tr表示行，td表示这一行的单元格的内容，例如说一个tr包裹了3个td,就是指一行之内有三个单元格。 表格<table>的属性： 在table标签中可以定义以上这些属性的内容： <table border="1" bordercolor="red" width="500px" height="500px" align="center" cellspacing="0" cellpadding=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值