HTML+CSS培训教案（六）

最新推荐文章于 2022-02-05 18:36:15 发布

红壶吃猬队

最新推荐文章于 2022-02-05 18:36:15 发布

阅读量210

点赞数

分类专栏： HTML/CSS HTML+CSS培训教案文章标签： HTML CSS 教程

本文链接：https://blog.csdn.net/chenmiaoqin950606/article/details/88854813

版权

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

17 篇文章 0 订阅

订阅专栏

HTML+CSS培训教案

16 篇文章 1 订阅

订阅专栏

十三、表格（一）

代码

<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>

答案：属性叠加原则：可同时对单元格进行列向和行向的合并

红壶吃猬队

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS培训教案（六）

十三、表格（一）代码<html> <head> <meta content="text/html;charset=utf-8"> <title>表格</title> </head> <body> <table> ...
复制链接

扫一扫