CSS数据样式

2021-01-21 03:12

阅读：855

标签：att 背景隐藏绘制 after href 一个除了 dev

CSS数据样式

表格

定制表格

　　我们除了可以使用

标签进行绘制表格，在css3中display也支持进行表格的样式绘制。

样式规则	说明
table	对应 table
table-caption	对应 caption
table-row	对表 tr
table-cell	对于th或td
table-row-group	对应 tbody
table-header-group	对应 thead
table-footer-group	对应 tfoot


 

 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    link rel="stylesheet" href="./css学习.css">
head>
body>
    article>
        nav>一份表格nav>
        section>
            ul>
                li>姓名li>
                li>性别li>
                li>年龄li>
            ul>
        section>
        section>
            ul>
                li>小明li>
                li>男li>
                li>18li>
            ul>
        section>
        section>
            ul>
                li>小红li>
                li>女li>
                li>19li>
            ul>
        section>
        section>
            ul>
                li>小姜li>
                li>女li>
                li>21li>
            ul>
        section>
    article>
body>
html>

元素表单HTML

 


body article {
  display: table;
}
body article nav {
  display: table-caption;
  font-weight: bolder;
  
  text-align: center;
  vertical-align: middle;
}
body article section:nth-of-type(1) {
  display: table-header-group;
}
body article section:nth-of-type(2) {
  display: table-row-group;
  
}
body article section:nth-of-type(3) {
  display: table-row-group;
}
body article section:nth-of-type(4) {
  display: table-footer-group;
  
}
body article section ul {
  display: table-row;
}
body article section ul li {
  display: table-cell;
  border: solid 1px #ddd;
  padding: 10px;
}

元素表单CSS

 
表格标题

 　　我们可以使用caption-side设置表格标题的位置，值可以是top或者bottom。
 


 
 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
?
    style>
head>
body>
    table border="1px">
        caption>一份表格caption>
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            tr>
                td>小明td>
                td>男td>
                td>18td>
            tr>
        tbody>
    table>
body>
html>

表格标题位置

 
内容对齐

 　　表格中内容对齐方式可以使用text-aligen以及vertical-aligen来进行控制。
 
 　　水平对齐text-aligent。


值
描述



left
左对齐


right
右对齐


center
居中对齐



 
 　　垂直对齐vertical-aligen。


属性
说明



top
顶对齐


middle
垂直居中


bottom
底部对齐



 

 
 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
    style>
head>
body>
    table border="1px">
        caption>一份表格caption>
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            tr>
                td>小明td>
                td>男td>
                td>18td>
            tr>
        tbody>
    table>
body>
html>

表格内容对齐

 
颜色设置

 　　我们可以为
中的任何HTML元素进行颜色设置。
 

 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
    style>
head>
body>
    table border="1px">
        caption>一份表格caption>
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            tr>
                td>小明td>
                td>男td>
                td>18td>
            tr>
            tr>
                td>小红td>
                td>女td>
                td>17td>
            tr>
            tr>
                td>小花儿td>
                td>女td>
                td>13td>
            tr>
            tr>
                td>小癞子td>
                td>男td>
                td>15td>
            tr>
        tbody>
    table>
body>
html>

颜色设置

 
边框间距

 　　我们可以使用border-spacing来设置边框的间距。两个值，一个对应上下，一个对应左右，单位可以是px，em，rem，%等等。
 

 
 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
        
        table{
            border-spacing: 5px 10px;
        }
?
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    style>
head>
body>
    table border="1px">
        caption>一份表格caption>
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            tr>
                td>小明td>
                td>男td>
                td>18td>
            tr>
            tr>
                td>小红td>
                td>女td>
                td>17td>
            tr>
            tr>
                td>小花儿td>
                td>女td>
                td>13td>
            tr>
            tr>
                td>小癞子td>
                td>男td>
                td>15td>
            tr>
        tbody>
    table>
body>
html>

边框间距

 
边框合并

 　　我们可以看一下上面图的表格，他们的表格边框都是由间距的。如果我们想把它设置为单线的可以使用border-collapse: collapse;进行设置。
 

 
 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
?
        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
        }
?
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    style>
head>
body>
    table border="1px">
        caption>一份表格caption>
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            tr>
                td>小明td>
                td>男td>
                td>18td>
            tr>
            tr>
                td>小红td>
                td>女td>
                td>17td>
            tr>
            tr>
                td>小花儿td>
                td>女td>
                td>13td>
            tr>
            tr>
                td>小癞子td>
                td>男td>
                td>15td>
            tr>
        tbody>
    table>
body>
html>

边框合并

 
隐藏单元格

 　　如果想隐藏没有内容的单元格，可使用empty-cells: hide;进行设置。
 

 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>
?
        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }
?
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    style>
head>
body>
    table border="1px">
        caption>一份表格caption>
        thead>
            tr>
                th>姓名th>
                th>性别th>
                th>年龄th>
            tr>
        thead>
        tbody>
            tr>
                td>小明td>
                td>男td>
                td>18td>
            tr>
            tr>
                td>小红td>
                td>女td>
                td>17td>
            tr>
            tr>
                td>小花儿td>
                td>女td>
                td>13td>
            tr>
            tr>
                td>小癞子td>
                td>男td>
                td>15td>
            tr>
            tr>
                td>未知td>
                td>td>
                td>td>
            tr>
        tbody>
    table>
body>
html>

隐藏单元格

 
无边框表格

 　　无边框表格需要用到之前结合的知识，使用很多选择器进行设置。
 

 


DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>Documenttitle>
    style>

        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }

        table>caption:first-child{
            caption-side: top;
            border: solid 1px #ddd;
            border-left: unset;
            border-right: unset;
        }


        table tr td{
            /* 垂直与水平居中 */
            vertical-align: middle;
            text-align: center;
            vertical-align: middle;
            text-align: center;
        }

        table tbody tr:nth-child(odd){
            background-color: #ddd;
        }
        
        table,table tr th,table tr td:last-child,table tr td:first-child{
            border-left: unset;
            border-right: unset;
        }

    style>
head>
body>
    table border="1px">
        caption>一份表格caption>