HTML中的表格

一、表格元素

表格以“行”与“列”的方式展现数据

HTML 表格由 <table> 标签来定义 每个表格包含若干行，由 <tr> 标签定义 每行被分割为若干单元格，由 <td> 标签定义 数据单元格可以包含文本、图片、列表、表单、表格等。

<caption> 表格标题

<thead> 表格头

<tbody> 表格体

<tfoot> 表格尾

二、表格定义

最简单的表格定义 table / tr / td

如：

        <h2>用户信息表</h2>    

        <table border="1">        

            <tr>            

                <td>张三</td>            

                <td>23</td>            

                <td>上海</td>        

            </tr>        

            <tr>            

                <td>李四</td>            

                <td>29</td>            

                <td>北京</td>        

            </tr>    

        </table>

表格添加<caption><thead><tbody><tfoot>

如：

<table border="1" width="100%">

        <caption>用户信息表</caption>        

        <thead>            

            <tr>                

                <th>姓名</th> <th>年龄</th>            

            </tr>        

        </thead>        

        <tbody>            

            <tr>                

                <td>张三</td> <td>20</td>            

            </tr>            

            <tr>                

                <td>李四</td> <td>30</td>            

            </tr>        

        </tbody>        

        <tfoot>            

            <tr>                

                <td>平均年龄</td> <td>25</td>            

            </tr>        

        </tfoot>    

    </table>

三、表格操作

表格合并列属性 colspan 将多列合并成一列

  <table border="1">        

        <tr>            

            <td colspan=“3”>用户信息表</td>            

        </tr>        

        <tr>            

            <td>张三</td>            

            <td>23</td>            

            <td>上海</td>        

        </tr>        

        <tr>            

             <td>李四</td>            

            <td>29</td>            

            <td>北京</td>        

        </tr>    

    </table>

    

表格合并行属性 rowspan 将多行合并成一行

<table border="1">        

        <tr>            

            <td colspan="3" >用户信息表</td>            

        </tr>        

        <tr>            

            <td>张三</td>            

            <td>23</td>            

            <td rowspan="2">上海</td>        

        </tr>        

        <tr>            

             <td>李四</td>            

            <td>29</td>            

        </tr>    

    </table>