HTML表格开发详解-优快云博客

本文链接：https://blog.youkuaiyun.com/cfyzcc/article/details/50826673

/*************************************
本文讲述HTML开发中的表格开发
********************************************/
一、概述
Web1.0时代，表格更多的用在网页布局定位上。但是在Web2.0时代，表格定位已经摒弃，大多数使用”DIV+CSS”模式。
语法：

<table>
   <tr>
       <td>单元格内容</td>
       <td>单元格2内容</td>
   </tr>                 //这表示第一行单元格内容
   <tr>
       <td>**********</td>
       <td>******************</td>
   </tr>
</table>

值得注意的是，这里采用table还是web1.0的做法，HTML只关注结构，而CSS关注样式。今后将采用Div+CSS来做。
关键词记忆：
table-表格；
tr-table row；
td-table data cell；

二、结构
1.表格标题:caption

<table>
    <caption>表格的标题</caption>
    <tr>
        <td>********</td>
        <td>xxxxxxxxxxxx</td>
    </tr>
    <tr>
        <td>aaaaaaaaaaaaaaa</td>
        <td>sssssssssssssssssssssssssss</td>
    </tr>
</table>

2.表头：th
跟td有点类似，主要用在第一行，表示该行/列的内容。默认格式是粗体，居中。
关键词记忆：table head

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        .....
    </tr>
    <tr>
        <td>单元格内容</td>
        <td>单元格内容2</td>
        ....
    </tr>
</table>

总的来说，表格结构的关键词：
1.表格：table
2.标题：caption
3.行：tr
4.表头单元格：th
5.表格：td

除此之外，为了让HTML语义上更加清晰，我们设置了表头、表身和表尾。虽然这些加上和不加上对于显示效果看来没什么区别，但是对于语义的理解和代码维护及搜索引擎能够搜索到也很重要。他们的关键词是：
1.表头：thead
2.表身：tbody
3.表尾：tfoot

<body>
    <table>
        <caption>the title of table:</caption>
        <thead>
            <tr>
                <th>*******</th>
                <th>xxxxxxxxxxxxxxxxxxxx</th>
            </tr>
        </thead>
    <tbody>
        <tr>
            <td>***********</td>
            <td>xxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>///////////////////////</td>
            <td>################################</td>
        </tr>
    </tfoot>
    </table>
</body>

3.合并行rowspan和合并列colspan
语法：

<body>
    <table>
    <!--the first row-->
    <thead>
        <tr>
            <th>name:</th>
            <th>favorite:</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xiaoxiao:</td>
            <td>water melon</td>
        </tr>
        <tr>
            <td colspan="2">合并两列，相当于空一行</td>
        </tr>
        <tr>
            <td>jim</td>
            <td>orange</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        <td rspan="2">合并两行，相当于空一列</td>
        <td>pear</td>
        </tr>
        <tr>
        <td></td>
        <td>apple</td>
        </tr>
    </tfoot>
    </table>
</body>

结果如下：
这里写图片描述

三、总结
基本标签：
1.table：表格
2.tr：table row 表格的行
3.td：table data cell 表格里的元素

结构（语义）标签
1.thead；table head表头
2.tbody：table body表身
3.tfoot：table foot 表尾
4.th：表头的单元格，即第一行单元格，与td类似，但是语义上意思不一样。

表格合并：
rspan：行合并
colspacn：列合并

表格完整的套路：

<body>
<table>
    <thead>
        <th>**********</th>
    </thead>
    <tbody>
        <td>*************</td>
        <td rspan="2">合并行</td>
        <td colspan="2">合并列</td>
    </tbody>
    <tfoot>
        <td>*************</td>
    </tfoot>
    </table>
</body>

Web前端开发-5