实例讲透HTML表格标签

04-23 16:03 565浏览

举报 T字号

大字

中字

小字

表格是一种组织整理数据的手段，在HTML当中表格使用<table> 标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<body>
    <table>
        <tr>
            <td>第1行-第1列</td>
            <td>第1行-第2列</td>
            <td>第1行-第3列</td>
        </tr>
        <tr>
            <td>第2行-第1列</td>
            <td>第2行-第2列</td>
            <td>第2行-第3列</td>
        </tr>
        <tr>
            <td>第3行-第1列</td>
            <td>第3行-第2列</td>
            <td>第3行-第3列</td>
        </tr>
    </table>
</body>

1.表格边框属性

如果不定义边框属性，表格将不显示边框，但是大多数时候，我们希望显示边框。我们可以在在table标签中添加border属性，border的属性值可以直接位数字，省略单位像素（px）。

<body>
    <!--设置table的边框的宽度为1px，表格居中显示-->
    <table border="1" align="center">
        <!--设置每一行的高度为40px,内容显示居中。-->
        <tr height="40x" align="center">
            <!--设置每一列的宽度为120px-->
            <td width="120px">第1行-第1列</td>
            <td width="120px">第1行-第2列</td>
            <td width="120px">第1行-第3列</td>
        </tr>
        <tr height="40x" align="center">
            <td>第2行-第1列</td>
            <td>第2行-第2列</td>
            <td>第2行-第3列</td>
        </tr>
        <tr height="40x" align="center">
            <td>第3行-第1列</td>
            <td>第3行-第2列</td>
            <td>第3行-第3列</td>
        </tr>
    </table>
</body>

2.表格的表头

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<body>
    <table align="center" border="1" cellspacing="0">
        <tr align="center" height="40px">
            <!--设置表格的表头-->
            <th width="70px">演员</th>
            <th width="90px">代表作</th>
        </tr>
        <tr align="center" height="40px">
            <td>成龙</td>
            <td>警察故事</td>
        </tr>
        <tr align="center" height="40px">
            <td>周星驰</td>
            <td>大话西游</td>
        </tr>
        <tr align="center" height="40px">
            <td>李连杰</td>
            <td>少林寺</td>
        </tr>
    </table>
</body>

3.表格的标题

在<table>标签中添加<caption>标签。

<body>

    <table align="center" border="1" cellspacing="0">

        <!--给表格设置标题-->

        <caption>优秀男演员代表作</caption>

        <tr align="center" height="40px">

            <!--设置表格的表头-->

            <th width="70px">演员</th>

            <th width="90px">代表作</th>

        </tr>

        <tr align="center" height="40px">

            <td>成龙</td>

            <td>警察故事</td>

        </tr>

        <tr align="center" height="40px">

            <td>周星驰</td>

            <td>大话西游</td>

        </tr>

        <tr align="center" height="40px">

            <td>李连杰</td>

            <td>少林寺</td>

        </tr>

    </table>

</body>

4.表格跨行跨列

在<td>或<th>标签中添加colspan属性实现跨列操作。

<body>
    <table border="1" align="center" cellspacing="0" cellpadding="10">
        <caption>横跨两列的单元格</caption>
        <tr height="35px">
            <th>姓名</th>
            <!--添加colspan属性，实现跨两列单元格-->
            <th colspan="2">手机号</th>
        </tr>
        <tr height="35px">
            <td>周安德</td>
            <td>18911450210</td>
            <td>18523202346</td>
        </tr>
        <tr height="35px"  align="center">
            <td>谭健</td>
            <td>18911450210</td>
            <td>18523202346</td>
        </tr>
    </table>
</body>

实践是检验真理的唯一标准，我们只有能够耐下心来，按照上述的几个实例，自己写出HTML文件并查看运行效，找出不对的地方加以改正，逐渐掌握HTML的表格标签也是板上钉钉的事了。动力节点在线推出了全新的HTML视频课程，帮助我们快速奠定HTML基础，感兴趣的小伙伴快来学习吧！

0人推荐

共同学习，写下你的评论

0条评论

代码小兵696

118篇文章贡献392976字

实例讲透HTML表格标签

1.表格边框属性

2.表格的表头

3.表格的标题

4.表格跨行跨列

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

实例讲透HTML表格标签

1.表格边框属性

2.表格的表头

3.表格的标题

4.表格跨行跨列

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>