HTML+CSS培训教案（六）

最新推荐文章于 2024-08-01 09:59:14 发布

原创最新推荐文章于 2024-08-01 09:59:14 发布 · 274 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #教程

HTML/CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

HTML+CSS培训教案

16 篇文章

订阅专栏

本文介绍HTML表格的基本用法，包括使用<table>、<tr>、<td>创建简单表格，以及如何通过colspan和rowspan属性实现单元格的合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

十三、表格（一）

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>表格</title>
    </head>
    <body>
        <table>
            <tr><td>A1</td><td>A2</td><td>A3</td><td>A4</td></tr>
            <tr><td>B1</td><td>B2</td><td>B3</td><td>B4</td></tr>
            <tr><td>C1</td><td>C2</td><td>C3</td><td>C4</td></tr>
        </table>
    </body>
</html>

知识点

<table></table>表格标记，table-tr-td三级嵌套
<tr></tr>表格中的行，<td></td>行内单元格，其标记中内容为单元格内容

扩展

<table></table>标记添加属性：border=“0” bordercolor=“red” cellspacing=“2” cellpadding=“5”

答案：(1)border：大小边框设置，bordercolor：边框颜色设置

(2)cellspacing：设置单元格间距（唯一一个CSS无法替代的设置项）

(3)cellpadding：设置单元格内边距

十四、表格（二）

代码

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>合并单元格</title>
    </head>
    <body>
        <table border="1">
            <tr><td>A1</td><td colspan="2">A2A3</td><td>A4</td></tr>
            <tr><td rowspan="2">B1C1</td><td>B2</td><td>B3</td><td>B4</td></tr>
            <tr><td>C2</td><td>C3</td><td>C4</td></tr>
        </table>
    </body>
</html>

知识点

colspan：列项合并单元格，值代表把多少个单元格合并为一个。rowspan：行向…
合并单元格之后，单元格总数会减少

扩展

代码如下：

<html>
    <head>
        <meta content="text/html;charset=utf-8">
        <title>合并单元格</title>
    </head>
    <body>
        <table border="1">
            <tr><td colspan="2" rowspan="2">A1A2B1B2</td><td>A3</td><td>A4</td></tr>
            <tr><td>B3</td><td>B4</td></tr>
            <tr><td>C1</td><td>C2</td><td>C3</td><td>C4</td></tr>
        </table>
    </body>
</html>