10.表格

作者: 一直流浪 | 来源:发表于2022-09-05 23:59 被阅读0次

10.表格
5
夜宵10.早睡6
*10. Regular Expression Matching
达州车站卖盒饭的女人
2019-11-04
10.在图书馆里试译艾米莉·狄金森诗选第一部分生活

html5表格标签

隔离 Reflection Day 10. What is so

我

参考链接：https://www.w3school.com.cn/css/css_table.asp

一、CSS表格

CSS 表格属性可以帮助您极大地改善表格的外观。

二、属性

2.1 border-collapse 属性

border-collapse 属性设置是否将表格边框折叠为单一边框：

值：

separate——默认值。边框会被分开。
collapse——边框会合并为一个单一的边框。
inherit——从父元素继承 border-collapse 属性的值。

<!DOCTYPE html>
<!--
    作者：2584966199@qq.com
    时间：2020-03-17
    描述：
    border-collapse 属性设置表格的边框是否被合并为一个单一的边框
-->
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            table {
                border-collapse: collapse;
            }
            
            table,
            td,
            th {
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <table>
            <tr>
                <th>Name</th>
                <th>Annual income </th>
            </tr>
            <tr>
                <td>张三</td>
                <td>50w</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60w</td>
            </tr>
        </table>
    </body>
</html>

2.2 border-spacing 属性

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            table.one {
                border-collapse: separate;
                border-spacing: 10px
            }
            
            table.two {
                border-collapse: separate;
                border-spacing: 10px 50px
            }
        </style>
    </head>

    <body>
        <table class="one" border="1">
            <tr>
                <td>张三</td>
                <td>50w</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60w</td>
            </tr>
        </table>

        <br />

        <table class="two" border="1">
            <tr>
                <td>张三</td>
                <td>50w</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60w</td>
            </tr>
        </table>    
    </body>
</html>

2.3 caption-side 属性

caption-side 属性设置表格标题的位置。

可能的值：

top默认值。把表格标题定位在表格之上。
bottom把表格标题定位在表格之下。
left 把表格标题定位在表格左边（谷歌浏览器支持）。
right 把表格标题定位在表格右边（谷歌浏览器支持）。
inherit规定应该从父元素继承 caption-side 属性的值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .test1{
                caption-side: top;
            }
            .test2{
                caption-side:left;
            }
            .test3{
                caption-side: right;
            }
            .test4{
                caption-side: bottom;
            }
        </style>
    </head>
    <body>
        <h1>caption上边</h1>
        <table border="1" class="test1">
            <caption>caption在上面</caption>
            <tbody> 
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
            </tbody>
        </table>
        
        <h1>caption左边</h1>
        <table border="1" class="test2">
            <caption>caption在左面</caption>
            <tbody> 
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
            </tbody>
        </table>
        
        <h1>caption右边</h1>
        <table border="1" class="test3">
            <caption>caption在右面</caption>
            <tbody> 
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
            </tbody>
        </table>
        
        <h1>caption下边</h1>
        <table border="1" class="test4">
            <caption>caption在下面</caption>
            <tbody> 
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
                <tr>
                    <td>这是一个单元格</td>
                    <td>这是一个单元格</td>
                </tr>
            </tbody>
        </table>    
    </body>
</html>

2.4 empty-cells 属性

empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

可能的值：

hide不在空单元格周围绘制边框。
show在空单元格周围绘制边框。默认。
inherit规定应该从父元素继承 empty-cells 属性的值。

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>empty-cells</title>
        
        <style>
            body {
                background-color: deepskyblue;
            }
            
            h1 {
                font-size: 16px;
                font-family: Arial;
            }
            
            .test {
                empty-cells: show;
            }
            
            .test2 {
                empty-cells: hide;
            }
        </style>
    </head>

    <body>
        <h1>show:</h1>
        <table border="1" class="test">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Joy</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kate</td>
                    <td></td>
                </tr>
            </tbody>
        </table>

        <h1>hide:</h1>
        <table border="1" class="test2">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Joy</td>
                    <td>26</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Kate</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

2.5 table-layout 属性

tableLayout 属性用来显示表格单元格、行、列的算法规则。

automatic默认。列宽度由单元格内容设定。
fixed列宽由表格宽度和列宽度设定。
inherit规定应该从父元素继承 table-layout 属性的值。

.固定表格布局：

固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

自动表格布局：

在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。

此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

<!DOCTYPE html>
<!--
    作者：2584966199@qq.com
    时间：2020-03-17
    描述：table-layout 属性
    automatic   默认。列宽度由单元格内容设定。
    fixed   列宽由表格宽度和列宽度设定。
-->
<html lang="zh-cn">

    <head>
        <meta charset="utf-8" />
        <title>table-layout</title>
        
        <style>
            body {
                background-color: deepskyblue;
            }
            
            h1 {
                font-size: 16px;
                font-family: Arial;
            }
            
            .auto {
                table-layout: auto;
                width: 400px;
            }
            
            .fixed {
                table-layout: fixed;
                width: 400px;
            }
        </style>
    </head>

    <body>
        <h1>auto: 自动表格布局</h1>
        <table border="1" class="auto">
            <tbody>
                <tr>
                    <td>自动表格布局，宽度将基于单元格的内容自动拉伸</td>
                    <td>自动表格布局</td>
                    <td>自动表格布局</td>
                </tr>
                <tr>
                    <td>自动表格布局</td>
                    <td>自动表格布局</td>
                    <td>自动表格布局</td>
                </tr>
            </tbody>
        </table>

        <h1>fixed: 固定表格布局</h1>
        <table border="1" class="fixed">
            <tbody>
                <tr>
                    <td>固定表格布局</td>
                    <td>固定表格布局</td>
                    <td>固定表格布局</td>
                </tr>
                <tr>
                    <td>固定表格布局</td>
                    <td>固定表格布局</td>
                    <td>固定表格布局</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

例：一个漂亮的表格

<html>
<head>
<style type="text/css">
#customers
  {
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  width:100%;
  border-collapse:collapse;
  }

#customers td, #customers th 
  {
  font-size:1em;
  border:1px solid #98bf21;
  padding:3px 7px 2px 7px;
  }

#customers th 
  {
  font-size:1.1em;
  text-align:left;
  padding-top:5px;
  padding-bottom:4px;
  background-color:#A7C942;
  color:#ffffff;
  }

#customers tr.alt td 
  {
  color:#000000;
  background-color:#EAF2D3;
  }
</style>
</head>

<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

<tr>
<td>Apple</td>
<td>Steven Jobs</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Baidu</td>
<td>Li YanHong</td>
<td>China</td>
</tr>

<tr>
<td>Google</td>
<td>Larry Page</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Lenovo</td>
<td>Liu Chuanzhi</td>
<td>China</td>
</tr>

<tr>
<td>Microsoft</td>
<td>Bill Gates</td>
<td>USA</td>
</tr>

<tr class="alt">
<td>Nokia</td>
<td>Stephen Elop</td>
<td>Finland</td>
</tr>


</table>
</body>
</html>