web概述04（table的使用）

table

基本属性

    <table border="1" width="30%">
        <tr height="80px">
            <th width="200px">姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
        <tr>
            <td>王晓痛</td>
            <td>男</td>
            <td>已婚</td>
        </tr>
        <tr>
            <td>蒙新凯</td>
            <td>女</td>
            <td>未婚</td>
        </tr>
    </table>
    <hr/>
    <h3>基本属性</h3>
    <ul>
        <li>width和height用于设置表格、行或者列的宽度和高度</li>
        <li>bgcolor用于设置背景色，一般已不再建议使用</li>
        <li>align用于设置对平对齐方式，table的align用于设置表格在浏览器中的显示位置;如果tr和td则设置的是单元格中的内容对齐方式</li>
        <li>valign用于设置单元格中内容的垂直对齐方式，默认单元格的高度是由其中内容决定的</li>
        <li><strong>注意：</strong>一般不建议使用table中的显示样式控制</li>
    </ul>
    <table bgcolor="red" align="center">
        <tr bgcolor="blue">
            <th width="200px">姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
        <tr>
            <td align="right">王晓痛</td>
            <td>男</td>
            <td>已婚</td>
        </tr>
        <tr align="right" height="100px">
            <td valign="top">蒙新凯</td>
            <td valign="middle">女</td>
            <td valign="bottom">未婚</td>
        </tr>
    </table>
    <hr/>
    <h3>跨行和跨列问题</h3>
    <ul>
        <li>colspan用于实现跨列,当某个格子跨N列时，其右边N-1个单元格会自动删除</li>
        <li>rowspan用于实现跨行，当某个格子跨N行时，其下方N-1个单元格会自动删除</li>
    </ul>
    <table border="1" style="width: 300px;">
        <tr>
            <th rowspan="4">基本情况</th>
            <th>姓名</th>
            <th>性别</th>
            <th>婚否</th>
        </tr>
        <tr>
            <td>王晓痛</td>
            <td>男</td>
            <td>已婚</td>
        </tr>
        <tr>
            <td valign="top">蒙新凯</td>
            <td valign="middle">女</td>
            <td valign="bottom">未婚</td>
        </tr>
        <tr>
            <td colspan="3">统计：共2人</td>
        </tr>
    </table>

表格的结构化

 <p>表格可以分为表头、表体和表尾，这样修改其中一部分时不会影响其它部分，从而方便对表格使用javascript进行操作</p>
    <ul>
        一个完整的表通常可以分为4个部分：
        <li>caption用于定义表格的标题，一般出现在表格的顶部，居中显示</li>
        <li>thread定义表格的表头部分，通常表现为表格的标题行<br/>thread限制和规范表格的表头部分，尤其是用于动态生成表头，位置是不固定的，使用这个元素可以限制显示位置</li>
        <li>tbody定义表格的表体部分，一个表格可以有多个主体，可以按照行进行显示<br/>
            tboty主要是包含非表头和表尾的主体部分，有助于表格格式的清晰，更加有助于后续的css显示控制和javascript编码控制
        </li>
        <li>tfoot用于定义表格的表尾部分，通常表现为总计行。限制在表格的底部</li>
    </ul>
    <table border="1">
        <caption>学生统计信息</caption>
        <tfoot>
            <tr>
                <td colspan="3">总共3名学生</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>dddd</td>
                <td>1989-2-3</td>
                <td>true</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th>学生姓名</th>
                <th>入学时间</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>萌新开</td>
                <td>1989-4-5</td>
                <td>false</td>
            </tr>
        </tbody>

表格的分组

    <ul>
        <li>colgroup标签用于将表格中的列进行分组，并可以为不同的组设置不同的显示样式</li>
        <li>col标签不会产生表格列，只是用于为表格中的列设置指定的属性值，如果在table中使用col为表格指定属性，则col定义的表格列数应该和表格的实际列数一致</li>
    </ul>
    <table  border="1">
        <!--使用colgroup将table中的所有列分为2个大的分组，可以为不同的分组设置不同的显示样式。这里的table有3个列，使用colgroup将3列分为2个组，一个组有一个列，两外一个组包含2个列-->
        <colgroup style="background-color: red;"></colgroup>
        <colgroup style="background-color: green;">
            <!--如果两个列的定义相同，可以使用span=2标识连个列的定义一致-->
            <col style="width: 100px;"></col>
            <col></col>
        </colgroup>
        <thead>
            <tr>
                <th colspan="3">考试成绩</th>
            </tr>
            <tr>
                <th>姓名</th><th>语文</th><th>数学</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td>平均成绩</td>
                <td>70</td>
                <td>80</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>萌新开</td><td>60</td><td>70</td>
            </tr>
            <tr>
                <td>内蒙人</td><td>80</td><td>90</td>
            </tr>
        </tbody>
       
    </table>

表格的推荐用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .table1{
            width: 80%;
            border: 1px solid #000;
            border-collapse: collapse; 
            table-layout: fixed;
        }
        .table1 td {
            border: 1px solid #555;
        }
        .col-4 {
            width: 33.33333%;
        }
        .col-2 {
            width: 16.6666%;
        }
        .bbb {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <h2>table的推荐用法</h2>
    <p>表格一般用于显示数据以及数据之间的关系，具体的显示效果还是建议使用css进行格式控制</p>
    <table class="table1">
        <caption>col标签的用法</caption>
        <!--
            col标签，可以用于设置每一列的样式，在一个table中可以定义多次
        -->
        <col class="col-2 bbb"></col>
        <col class="col-4"></col>
        <col class="col-2 bbb"></col>
        <col class="col-4"></col>

        <tr>
            <th>aaaa</th><th>bbbbb</th><th>cccc</th><th>dddd</th>
        </tr>
        <tr>
            <td>11111</td><td>222222</td><td>33333</td><td>44444</td>
        </tr>
    </table>
</body>
</html>

为什么不建议使用table进行布局

• table比其它标签占用更多的字节数（造成下载时间延迟，占用更多的服务区流量资源）
• table会阻塞浏览器渲染引擎的渲染顺序（会延迟页面的生成速度，导致用户等待时间变长）
• 在table中显示图片时需要将图片切分为多个图（增加设计的复杂度，增加页面的加载时间，增加http会话数）
• table会影响它内部的某些布局生效，限制页面设计的自由性
• 一般推荐使用css进行页面布局的显示控制
• table对于页面布局来说从语义上看不正确，table应该描述的应该是内容，不是显示
• table一旦设计完毕，很难再通过css修改显示效果