H5学习之20 CSS-table

来源：互联网发布：办公软件培训视频编辑：程序博客网时间：2024/04/28 22:37

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <link href="css.css" rel="stylesheet" type="text/css" /></head><body>    <table id="table1">        <caption>表格标题</caption>        <tr>        <th>标题1</th> <th>标题2</th> <th>标题3</th>        </tr>        <tr>            <td>1</td> <td>2</td> <td>3</td>        </tr>        <tr>            <td>4</td><td> </td><td> </td>        </tr>    </table>    <hr/><!-------------------------------------------------------------------------------------------------------------------->    <table id="table2">        <tr>            <th>标题1</th> <th>标题2</th> <th>标题3</th>        </tr>        <tr>            <td>11111</td> <td>22222</td> <td>33333</td>        </tr>        <tr>            <td>444444</td><td>555555</td><td>666666</td>        </tr>    </table><hr/><!--------------------------------------------------------------------------------------------------------------------><table id="table3">    <caption>漂亮的表格</caption>    <tr>        <th>漂亮</th> <th>漂亮</th> <th>漂亮</th>    </tr>    <tr class="alt">        <td>美丽</td> <td>美丽</td> <td>美丽</td>    </tr>    <tr>        <td>动人</td> <td>动人</td> <td>动人</td>    </tr>    <tr class="alt">        <td>动人</td> <td>动人</td> <td>动人</td>    </tr>    <tr>        <td>动人</td> <td>动人</td> <td>动人</td>    </tr>    <tr class="alt">        <td>动人</td> <td>动人</td> <td>动人</td>    </tr></table></body></html>

#table1 ,#table1 th,#table1 td{    border: 1px solid blue;    border-spacing: 50px;    empty-cells: hide;    caption-side: bottom;}/*三个标签 都有边框一个table设置了id ，直接#id 就代表了那个tableborder spacing 设置分隔单元格边框的距离。如果设置了 collapse:collapse 就失效empty cells 设置空单元格是否显示，我记得有一个属性可以让 没有内容的单元格也可以显示出边框，需要的话再查caption side 代表标题位置*//*---------------------------------------------------------------------------------------------------------------------*/#table2 ,#table2 th,#table2 td{    border: 1px solid blue;    border-collapse: collapse;}/*边框出现好几层的时候，border-collapse：collapse 可以让边框变成单层*/#table2{    width:100%;   /* height:100%;*/    text-align: right;    color: green;    background-color: darkgrey;}/*直接 设置 table的宽度为100%，可以让表格宽度填满屏幕，设置高度百分比不管用,高度具体数值可以更改text align 设置水平对齐方式，th默认是居中，设置成right就到右边了。color直接更改文字颜色background-color 更改背景颜色*/#table2 th{     height:100px ;    /* widht:100px;*/    vertical-align: top;    color: blue;}/*设置th的高度可以更改高度,在这里更改宽度不管用vertical-align 设置垂直对其方式，th默认居中，设置成top就到了上头。*/#table2 td{    height:25px;    padding:10px;}/*padding 更改内边距的值，控制表格中内容与边框的距离*//*---------------------------------------------------------------------------------------------------------------------*/#table3,#table3 th,#table3 td{    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;    caption-side: bottom;    border: green solid 1px;    border-collapse: collapse;}#table3{ width:100%;}#table3 th{    background-color: darkgreen;    color: white;    font-size: 1.2em;    text-align: left;    padding: 5px 0px 5px 4px;}/*内边距padding值， 4个值分别为上右下左，只设置1个值就是4个值全是，如果2 3 4 个 就按 上右下左的顺序*/#table3 td{    font-size: 0.9em;    padding: 4px;}#table3 tr.alt {    color: blue;    background-color: #EAF2D3;}/*给tr设置了一下类，然后设置了一下背景颜色*/

具体效果如下：

代码解释如下：

一共三个表格，

第一个表格

<table id="table1">    <caption>表格标题</caption>    <tr>    <th>标题1</th> <th>标题2</th> <th>标题3</th>    </tr>    <tr>        <td>1</td> <td>2</td> <td>3</td>    </tr>    <tr>        <td>4</td><td> </td><td> </td>    </tr></table>

#table1 ,#table1 th,#table1 td{    border: 1px solid blue;    border-spacing: 50px;    empty-cells: hide;    caption-side: bottom;}/*三个标签 都有边框一个table设置了id ，直接#id 就代表了那个tableborder spacing 设置分隔单元格边框的距离。如果设置了 collapse:collapse 就失效empty cells 设置空单元格是否显示，我记得有一个属性可以让 没有内容的单元格也可以显示出边框，需要的话再查caption side 代表标题位置*/

三个标签都有边框，指的是 table th td 都设置了border.

稍微注意一下选择的时候的格式

第二个表格

  <table id="table2">    <tr>        <th>标题1</th> <th>标题2</th> <th>标题3</th>    </tr>    <tr>        <td>11111</td> <td>22222</td> <td>33333</td>    </tr>    <tr>        <td>444444</td><td>555555</td><td>666666</td>    </tr></table>

#table2 ,#table2 th,#table2 td{    border: 1px solid blue;    border-collapse: collapse;}/*边框出现好几层的时候，border-collapse：collapse 可以让边框变成单层*/#table2{    width:100%;   /* height:100%;*/    text-align: right;    color: green;    background-color: darkgrey;}/*直接 设置 table的宽度为100%，可以让表格宽度填满屏幕，设置高度百分比不管用,高度具体数值可以更改text align 设置水平对齐方式，th默认是居中，设置成right就到右边了。color直接更改文字颜色background-color 更改背景颜色*/#table2 th{     height:100px ;    /* widht:100px;*/    vertical-align: top;    color: blue;}/*设置th的高度可以更改高度,在这里更改宽度不管用vertical-align 设置垂直对其方式，th默认居中，设置成top就到了上头。*/#table2 td{    height:25px;    padding:10px;}/*padding 更改内边距的值，控制表格中内容与边框的距离*/

第三个表格

<table id="table3">    <caption>漂亮的表格</caption>    <tr>        <th>漂亮</th> <th>漂亮</th> <th>漂亮</th>    </tr>    <tr class="alt">        <td>美丽</td> <td>美丽</td> <td>美丽</td>    </tr>    <tr>        <td>动人</td> <td>动人</td> <td>动人</td>    </tr>    <tr class="alt">        <td>动人</td> <td>动人</td> <td>动人</td>    </tr>    <tr>        <td>动人</td> <td>动人</td> <td>动人</td>    </tr>    <tr class="alt">        <td>动人</td> <td>动人</td> <td>动人</td>    </tr></table>

#table3,#table3 th,#table3 td{    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;    caption-side: bottom;    border: green solid 1px;    border-collapse: collapse;}#table3{ width:100%;}#table3 th{    background-color: darkgreen;    color: white;    font-size: 1.2em;    text-align: left;    padding: 5px 0px 5px 4px;}/*内边距padding值， 4个值分别为上右下左，只设置1个值就是4个值全是，#table3 td{    font-size: 0.9em;    padding: 4px;}#table3 tr.alt {    color: blue;    background-color: #EAF2D3;}/*给tr设置了一下类，然后设置了一下背景颜色*/

复杂的表格就是设置的样式多一点，颜色搭配好一点。

0 0