Web前端开发-5

/*************************************
本文讲述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>

结果如下:
Web前端开发-5_第1张图片

三、总结
基本标签:
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>

你可能感兴趣的:(html,web开发,5)