CSS中的表格

一、语法

二、表格的相关属性

三、高级表格应用

1.单元格间距

2.合并相邻单元格边框

3.无内容时单元格的设置

4.显示单元格行和列的算法

4.1 值为auto时(默认值)

4.2 值为fixed时

5.表格列标题

6.表格标题

设置表格标题的位置

7.数据行分组

8.数据列分组

一、语法

<table>
     <tr>
        <td></td>
        <td></td>
     </tr>
</table>

其中tr表示行，td是每一行中的单元格

二、表格的相关属性

width="表格的宽度“
height="表格的高度"
border="表格的边框“
bordercolor=“边框色”
bgcolor=”背景颜色”
cellspacing="单元格与单元格之间的间距"
cellpadding=“单元格与内容之间的距离"
align=“表格水平对齐方式” 取值：left、right、center （用在：table,tr，td）
valign=“垂直对齐” 取值：top\bottom\middle （用在：tr td）
合并单元格属性：

合并列： colspan=“所要合并的单元格的列数"

合并行： rowspan=“所要合并单元格的行数”

三、高级表格应用

1.单元格间距

作用：设置单元格边框之间的距离

border-spacing:value

示例代码：

 .table01{
            width: 300px;
            height: 150px;
            border: 1px solid red;
            border-spacing: 10px;
        }
 
 
 <table class="table01">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

让表格内每个单元格都间隔10px。

tip：该属性必须给table加，并且不可以取负值。

2.合并相邻单元格边框

作用：合并相邻单元格边框

语法：border-collapse：value

value取值有，separate(边框分开)默认值，collapse(边框合并)

示例代码：

 .table01{
            width: 300px;
            height: 150px;
            border: 1px solid red;
            border-collapse: collapse;
        }
 
 
 <table class="table01">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

实现让单元格相邻的边框合并

tip：该属性必须给table标签加

3.无内容时单元格的设置

语法：empty-cells:value

value取值show(显示)、hide(隐藏)

作用：在该单元格没有内容时，控制该单元格的显示或隐藏

tip：设置了该属性就不能设置单元格边框合并属性，否则该属性会失效。

4.显示单元格行和列的算法

语法： table-layout:auto/fixed

4.1 值为auto时(默认值)

列的宽度是由列单元格中没有折行的最宽的内容设定的

缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。优点：灵活固定表格布局 ,加快运行的速度,允许浏览器更快的对表格进行布局

4.2 值为fixed时

列的宽度是用户设置的固定值

5.表格列标题

语法：<th>标题文字</th>

th标记表示表格内的表头单元格,是单元格标题

例如：

 <table>
    <tr class="tr1">
        <th>登录账户</th>
        <th>IP</th>
        <th>登陆所在地</th>
        <th>上次登录时间</th>
    </tr>
    <tr class="bg9">
        <td>awdadad</td>
        <td>110.184.152.236</td>
        <td>110.184.152.236</td>
        <td>2022-08-05 10:29:25</td>
        </tr>
    <tr>
        <td>awdadad</td>
        <td>110.184.152.236</td>
        <td>110.184.152.236</td>
        <td>2022-08-05 10:29:25</td>
        </tr>
</table>

6.表格标题

语法：<caption>表格标题</caption>

设置表格标题的位置

语法：caption-side:top/right/bottom/left

定义表格的caption对象放于表格的哪个位置，与caption对象一起使用； top为默认值； left,right位置只有火狐识别， top,bottom IE6以上版本支持，IE6以下版本不支持其它属性值，只识别top;

7.数据行分组

<thead></thead>表头 <tbody></tbody>表体 <tfoot></tfoot>表尾

一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody

thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。

8.数据列分组

写法一：<colgroup span="value"></colgroup>双标签写法二：<col span="value" />单标签

col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。 Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性