html-表格标签

  表格标签可以对数据进行格式化,使数据显示更加清晰

    <table></table>:表示表格的范围
      - border:表格线
      - bordercolor:表格线的颜色
      - cellspacing:单元格之间的距离
      - width:表格的宽度
      - height:表格的高度

    ** 在table里面:<tr></tr>
      - 设置显示方式 aligh:left、center、right
      ** 在tr里面:<td></td>
        - 设置显示方式 aligh:left、center、right
      ** 使用th也可以实现居中和加粗

    * 代码
    <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">

    ** 表格的标题
      <caption></caption>

    *分析表格的写法
      - 首先定义一个表格的范围使用table
      - 定义一行使用tr
      - 定义一个单元格使用 td

    ** 操作技巧
      - 首先数有多少行(tr),数每行里面有多少个单元格(td)

    ** 合并单元格
      - rowspan:跨行
      - colspan:跨列

  完整代码:

<html>
    <head>
        <title>World</title>
    </head>
    <body>
        <!-- 实现3行四列的表格 -->
        <table border="1" bordercolor="blue" cellspacing="0" align="center" width="200" height="100">
            <caption>公司职员信息表</caption>
            <tr align="center">
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>职位</td>
            </tr>
            <tr align="center">
                <td>栗子壳</td>
                <td></td>
                <td>20</td>
                <td>老总</td>
            </tr>
            <tr>
                <th>栗子米</th>
                <th></th>
                <th>19</th>
                <th>秘书</th>
            </tr>        
        </table>
    </body>
</html>
<html>
    <head>
        <title>World</title>
    </head>
    <body>
        <!--
        测试跨列
        第一行:1
        第二行到第四行:3
        -->
        <table border="1" cellspacing="0" bordercolor="blue" width="200">
            <tr>
                <td colspan="3" align="center">人员信息</td>
            </tr>
            <tr>
                <td>岳不群</td>
                <td></td>
                <td>40</td>
            </tr>
            <tr>
                <td>令狐冲</td>
                <td></td>
                <td>25</td>
            </tr>
            <tr>
                <td>东方不败</td>
                <td></td>
                <td>24</td>
            </tr>
        </table>
        <hr/>
        <!--
        测试跨行
        第一行:3
        第二行到第三行:2
        -->
        <table border="1" cellspacing="0" bordercolor="blue" width="200">
            <tr>
                <td>岳不群</td>
                <td></td>
                <td rowspan="3" align="center">40</td>
            </tr>
            <tr>
                <td>令狐冲</td>
                <td></td>
            </tr>
            <tr>
                <td>东方不败</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>
原文地址:https://www.cnblogs.com/ibabyli/p/9882388.html