你好！这是我自己编辑的一些知识点。如果你想学习CSS与HTML的有关知识, 可以仔细阅读这篇文章，了解一下关于CSS与HTML的基本语法知识。

表格

表格元素

什么是表格

表格是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系。

什么是表格元素

释：

表格元素：
	<table>元素：表示一个表格，作为表格的容器
	<tr>元素：表示一个表格中的行
	<td>元素：表示一个表格中的单元格

具体语法如下：

<table>
    <tr>
        <th>first name</th>
        <th>last name</th>
    </tr>
    <tr>
        <td>john</td>
        <td>doe</td>
    </tr>
    <tr>
        <td>john</td>
        <td>doe</td>
    </tr>
</table>

表格的基本结构

表格的基本结构，具体语法如下：

<table>
    <tr>
        <td>单元格</td>
    </tr>
</table>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本的单表格</title>
</head>
<body>
    <table>
        <!--浏览器解析<table>元素时，自动生成一个子元素<tbody>-->
        <tr>
            <td>dd</td>
            <td>19</td>
            <td>male</td>
        </tr>
        <tr>
            <td>jj</td>
            <td>19</td>
            <td>female</td>
        </tr>
        <tr>
            <td>mm</td>
            <td>19</td>
            <td>female</td>
        </tr>
    </table>
</body>
</html>

标签单元格

释：

HTML <th>元素用来定义一组单元格的标题，该元素的用法与<td>元素保持一致，定义在<tr>元素中

具体语法如下：

<table>
    <tr>
        <th>first name</th>
        <th>last name</th>
    </tr>
    <tr>
        <td>john</td>
        <td>doe</td>
    </tr>
    <tr>
        <td>jane</td>
        <td>drt</td>
    </tr>
</table>

<th>元素的scope属性用来定义与该标题单元格相关联的单元格，值为:

row：表示当前标题单元格关联一行中的所有单元格
col：表示当前标题单元格关联一列中的所有单元格
rowgroup：表示当前标题单元格属于某一个行组并与其中所有单元格相关联
colgroup：表示当前标题单元格属于某一个列组并与其中所有单元格相关联
auto：由浏览器自动分配

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题单元格</title>
</head>
<body>
    <table>
        <tr>
            <th scope="col">姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>dd</td>
            <td>19</td>
            <td>male</td>
        </tr>
        <tr>
            <td>jj</td>
            <td>19</td>
            <td>female</td>
        </tr>
        <tr>
            <td>mm</td>
            <td>19</td>
            <td>female</td>
        </tr>
    </table>
</body>
</html>

表格的标题

释：

HTML <caption>元素用来定义HTML页面中表格的标题，该元素一般作为<table>元素的第一个子级元素出现，同时会显示在表格内容中的最前面，并且会在水平方向居中显示

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的标题</title>
</head>
<body>
    
</body>
<table>
    <caption>人员信息表</caption>
    <tr>
        <th scope="col">姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>dd</td>
        <td>19</td>
        <td>male</td>
    </tr>
    <tr>
        <td>jj</td>
        <td>19</td>
        <td>female</td>
    </tr>
    <tr>
        <td>mm</td>
        <td>19</td>
        <td>female</td>
    </tr>
</table>
</html>

跨行与跨列

HTML页面中的表格除了常规的之外，还可以实现跨行或跨列的效果，具体属性为：

colspan属性：用来规定表格单元格可横跨的列数
rowspan属性：用来规定表格单元格可横跨的行数

具体语法如下：

<table>
    <caption>class</caption>
    <tr>
        <th></th>
        <th acope="col">1</th>
        <th acope="col">2</th>
    </tr>
    <tr>
        <th acope="row">no or yes</th>
        <td colspan="3">yes</td>
    </tr>
</table>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨行或跨列的表格</title>
</head>
<body>
    
</body>
<table>
    <caption>人员信息表</caption>
    <!--
        一旦设置表格是跨行或跨列的情况：
        一定要注意表格的完整性
    -->
    <tr>
        <th scope="col">姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td colspan="2">dd</td>
        <td>19</td>
        <!--<td>male</td>-->
    </tr>
    <tr>
        <td rowspan="2">jj</td>
        <td>19</td>
        <td>female</td>
    </tr>
    <tr>
        <td >mm</td>
        <td>19</td>
        <!--<td>female</td>-->
    </tr>
</table>
</html>

长表格

释：

HTML页面提供了3个元素丰富页面：
	<thead>元素：用来定义HTML页面中表格的标题单元格的行
    <tbody>元素：用来定义HTML页面中表格的主体
    <tfoot>元素：用来定义HTML页面中表格一组各列的汇总行

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长表格</title>
</head>
<body>
    
</body>
<table>
    <caption>人员信息表</caption>
    <!--
        <thead>元素：无论定义在什么位置，最终显示在表格最上方
        <tbody>元素：无论定义在什么位置，最终显示在表格中间
        <tfoot>元素：无论定义在什么位置，最终显示在表格最下方
    -->
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>    
    </thead>
    <tbody>
    <tr>
        <td>dd</td>
        <td>19</td>
        <td>male</td>
    </tr>
    <tr>
        <td>jj</td>
        <td>19</td>
        <td>female</td>
    </tr>
    <tr>
        <td >mm</td>
        <td>19</td>
        <td>female</td>
    </tr>    
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td>3</td>
            <td></td>
        </tr>
    </tfoot>
</table>
</html>

表格样式

表格布局

CSS table-layout属性用来实现表格中单元格的布局，行和列的计算，属性值：

auto：默认值，浏览器会使用自动表布局算法，已达到表格及其单元格的宽度被调整以适应内容
fixed：表格或表格中列的宽度是由表格中第一行单元格的宽度决定的，后续行的单元格则不会影响表格中列的宽度

表格标题

CSS caption-side属性用来设置HTML页面中表格的<caption>元素显示的位置，该属性需要与<caption>属性配合使用，属性值为：
    top：默认值，表示表格标题显示在表格的上方
    bottom：表示表格标题显示在表格的下方

处理空的单元格

CSS empty-cells属性用来设置HTML页面的表格中没有可见内容的单元格的边框和背景是显示还是隐藏，属性值为：

show：默认值，边框和背景正常渲染，与普通元素一样
hide：边框和背景被隐藏

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理空单元格</title>
    <style>
        table, 
        th,
        td{
      
      
            border: 1px solid #000000;
        }
        td{
      
      
            empty-cells: hide;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>dd</td>
            <td>19</td>
            <td>male</td>
        </tr>
        <tr>
            <td>jj</td>
            <td></td>
            <td>female</td>
        </tr>
        <tr>
            <td>mm</td>
            <td>19</td>
            <td>female</td>
        </tr>
    </table>
</body>
</html>

单元格边框

CSS border-collapse属性用来设置HTMl页面中表格的边框是分离的还是合并的，属性值为：

separate：默认值，每个单元格拥有独立的边框
collapse：相邻的单元格共用同一条边框

CSS border-collapse属性用来设置HTML页面中表格的相邻单元格边框之间的距离，属性值为：

单值：同时设置单元格之间在水平方向和垂直方向的距离
双值：第一个值用来设置相邻两列的单元格之间的水平方向的距离，第二个值用来设置相邻两行的单元格之间的垂直方向的距离

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处理单元格边框</title>
    <style>
        tr{
      
      
            color:rgb(247, 243, 250);
            background-color: rgb(171, 150, 245);
        }
        table, 
        th,
        td{
      
      
            
            border: 1px solid #9e86f3;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>dd</td>
            <td>19</td>
            <td>male</td>
        </tr>
        <tr>
            <td>jj</td>
            <td>19</td>
            <td>female</td>
        </tr>
        <tr>
            <td>mm</td>
            <td>19</td>
            <td>female</td>
        </tr>
    </table>
</body>
</html>

结构伪类选择器

什么是结构伪类选择器

CSS 中的结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素，从而减少对HTML元素的 id 属性和 class 属性的依赖

CSS 结构伪类选择器：

伪类选择器	作用
selector:first-child	用来定位一组兄弟元素中的第一个元素
selector:last-child	用来定位一组兄弟元素中的最后一个元素
selector:nth-child(n)	用来定位一组兄弟元素中的第n个元素
selector:nth-last-child(n)	用来定位一组兄弟元素中倒序方式的第n个元素
selector:first-of-type	用来定位一组同类型的兄弟元素中的第一个元素
selector:last-of-type	用来定位一组同类型的兄弟元素中的最后一个元素
selector:nth-of-type	用来定位一组同类型的兄弟元素中的第n个元素
selector:nth-last-of-type	用来定位一组同类型的兄弟元素中倒叙方式的第n个元素
selector:only-child	用来定位一个没有任何兄弟元素的元素
selector:only-of-type	用来定位一个没有任何同类型兄弟元素的元素
selector:empty	用来定位一个没有子级元素的元素，并且该元素也没有任何文本内容
selector:root	用来定位HTML页面中的根元素

注意：

使用到的n是一个整数，而且是从1开始的正整数，也就是说，第一个元素的序号是1，不是0，当n的值为0时，则定位不到任何HTML元素。

:first-child 与 :last-child

:first-child伪类需要注意浏览器的兼容问题,用来定位一组兄弟元素中的第一个元素,:last-child用来定位一组兄弟元素中的最后一个元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:first-child和:last-child</title>
    <style>
        #ee td{
      
      
            background-color: rgb(152, 176, 253);
            padding: 5px 10px;
        }
        #ee td:first-child{
      
      
            border-top-left-radius: 5px;
        }
        #ee td:last-child{
      
      
            border-top-right-radius: 5px;
        }
    </style>
</head>
<body>
    <table id="ee">
        <tr>
            <td>介绍</td>
            <td>主体</td>
            <td>动态</td>
        </tr>
    </table>
</body>
</html>

:first-of -type 与 :last-of-type

:first-of -type用来定位一组同类型的兄弟元素中的第一个元素,:last-of-type用来定位一组同类型的兄弟元素中的最后一个元素

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:first-of-type和:last-of-type</title>
    <style>
        table{
      
      
            display: table;
            border: 1px solid rgba(121, 154, 247, 0.897);
            width: 100%;
        }
        td,
        th{
      
      
            border: 2px solid rgba(121, 154, 247, 0.897);
            padding: .25rem .5rem;
        }
        /*#ee td:first-of-type,
        #ee td:last-of-type{
            text-align: center;
        }*/
        #ee td:first-child,
        #ee td:last-child{
      
      
            text-align: center;
        }
    </style>
</head>
<body>
    <table id="ee">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>dd</td>
            <td>19</td>
            <td>male</td>
        </tr>
        <tr>
            <td>jj</td>
            <td>19</td>
            <td>female</td>
        </tr>
        <tr>
            <td>mm</td>
            <td>19</td>
            <td>female</td>
        </tr>
    </table>
</body>
</html>

:nth-child(n)和:nth-last-child(n)

:nth-child(n)用来定位一组兄弟元素中的第n个元素,:nth-last-child(n)用来定位一组兄弟元素中倒序方式的第n个元素

n的3种情况：

数字值：任意一个大于0的正整数
关键字：odd表示奇数，even表示偶数
格式为(an+b)公式：a表示周期的长度，n表示计数器，b表示偏移值

:empty

:empty伪类是用来定位没有任何子级元素或文本内容的元素，其中文本内容包含了空白

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:empty伪类</title>
    <style>
        .box{
      
      
            background: cornflowerblue;
            height: 80px;
            width: 80px;
            float: left;
            margin-left: 20px;
        }
        .box:empty{
      
      
            background: rgb(151, 131, 241);
        }
    </style>
</head>
<body>
    <div class="box"><!--注释--></div>
    <div class="box">吧啦吧啦吧啦吧啦</div>
    <div class="box">
        <!--注释--></div>
</body>
</html>

HTML表格与CSS结构伪类选择器

HTML表格与CSS结构伪类选择器

表格

表格元素

什么是表格

什么是表格元素

表格的基本结构

标签单元格

表格的标题

跨行与跨列

长表格

表格样式

表格布局

表格标题

处理空的单元格

单元格边框

结构伪类选择器

什么是结构伪类选择器

:first-child 与 :last-child

:first-of -type 与 :last-of-type

:nth-child(n)和:nth-last-child(n)

:empty

猜你喜欢