HTML（2）表格基本表示方式

最新推荐文章于 2024-03-18 18:50:29 发布

原创最新推荐文章于 2024-03-18 18:50:29 发布 · 685 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了HTML中表格的基本用法，包括如何创建表格、设置标题、定义表头及单元格，并展示了如何通过colspan和rowspan属性实现跨列和跨行。此外，还探讨了表格内嵌套其他HTML元素的方法。

HTML（2）基本表示方式

表格的表示

表格的表示

链接: 表格详细文档

实例展示与解析

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>TABLE</title>
</head>
<body>
<h1 align = "center">                   <!--h1代表一级标题，center表示标题居中-->
    我是一个表格
</h1>
<table align="center" border="10">      <!--boder代表边界宽度，越大越宽-->
    <caption>我是表格的标题</caption>
    <tr>                                <!--tr代表一行，td代表一行中的一个元素-->
        <th>Heading1</th>               <!--th代表表头，会有加粗的特点-->
        <th>Heading2</th>
        <th>Heading3</th>
    </tr>
    <tr>
        <td>
            1.1
        </td>
        <td>
            1.2
        </td>
        <td>
            1.3
        </td>
    </tr>

</table>
<br/>
<table align="center" border="10">      <!--boder代表边界宽度，越大越宽-->
    <caption>第二个表格的标题</caption>
    <tr>                                <!--tr代表一行，td代表一行中的一个元素-->
        <th>Heading1</th>               <!--th代表表头，会有加粗的特点-->
        <th colspan="2">我是横跨两列的表头</th><!--colspan="2"代表横跨两列-->
    </tr>
    <tr>
        <td rowspan="2">                <!--我是横跨两行的，rowspan = 2代表横跨两行-->
            1.1横跨两行
        </td>
        <td>
            1.2
        </td>
        <td>
            1.3
        </td>
    </tr>
    <tr>

        <td>
            2.2
        </td>
        <td>
            2.3
        </td>
    </tr>

</table>
<br/>
<table align="center" border="1">
    <tr>
        <td>
            <p>这是一个段落。</p>
            <p>这是另一个段落。</p>
        </td>
        <td>这个单元包含一个表格：
            <table border="1">
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>C</td>
                    <td>D</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>这个单元包含一个列表：
            <ul>
                <li>苹果</li>
                <li>香蕉</li>
                <li>菠萝</li>
            </ul>
        </td>
        <td>HELLO</td>
    </tr>
</table><!--表格内部支持多种形式的嵌套-->

</body>
</html>

运行结果
在这里插入图片描述

1、<h1>表示标题，从h1到h7标题级数依次递减，使用时需成对使用
2、<caption>代表表格的标题，会在表格上方正中间显示，需成对使用
3、<th>代表表头、在表格中使用<th>有加黑加粗的功效，需成对使用
4、colspan="2"代表横跨两行，row代表横跨列，作为属性值使用
5、表格中支持多种格式的嵌套使用
6、表格支持添加背景图片等功能，详细见上方参考文档