HTML5基础（二）个人笔记

最新推荐文章于 2022-10-25 16:22:55 发布

jredu1996

最新推荐文章于 2022-10-25 16:22:55 发布

阅读量285

点赞数 2

分类专栏： html5 新手

本文链接：https://blog.csdn.net/jredu1996/article/details/76066578

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

HTML5基本语法

1.表格

table
表格的基本属性有：
1.border 边框。
2.width 宽度。
3.height 高度。
4.align 对齐方式。
5.bgcolor 背景颜色。
6.background 背景图片。
7.cellspacing 单元格之间的间距。
8.cellpadding 单元格文本和单元格边框的距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--boeder :表格的边框
width:宽度
height：高度
cellspaceing:单元格之间的距离
cellpadding:单元格文本与单元格边框之间的距离
align:对齐方式
bgcolor:背景色
background：背景颜色
bordercolor:边框颜色-->
<table border="1"width="200px"height="80px"cellspacing="10"cellpadding="1" background="../img/15438-106.jpg">
    <tr>
        <th>啦啦啦</th>
        <td>11</td>

        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <th>呦呦呦</th>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
</table>
</body>
</html>

这里写图片描述

2.行和列

行和列的属性有如下几个：
1.width 宽度。
2.height 高度。
3.bgcolor 背景颜色。
4.align 对齐方式（水平方向）
5.valign 对齐方式（垂直方向）
6.nowarp 文本不换行
7.colspan=”n” 跨n列。
8.rowspan=”n” 跨n行。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行，跨列</title>
</head>
<body>
<table border="1" width="300px" height="60px">
    <tr>
        <td colspan="4" align="center">电子产品类</td>

    </tr>
    <tr>
        <td colspan="2" align="center">家电类</td>
        <td colspan="2" align="center">家具类</td>
    </tr>
    <tr>
        <td colspan="3" align="center">文具类</td>
        <td>饮</td>
    </tr>
    <tr>
        <td>21</td>
        <td>21</td>
        <td>23</td>
        <td>31</td>
    </tr>
</table>
<table border="1" width="300px" height="100px">
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
</table>
<table border="1">
    <tr>
        <th colspan="3"><h1>学生成绩</h1></th>

    </tr>
    <tr>
        <td rowspan="2"><h2>张三</h2></td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
    <td rowspan="2">张三</td>
    <td>语文</td>
    <td>100</td>
</tr>
    <tr>
    <td>语文</td>
    <td>100</td>
    </tr>
<table border="1">
    <tr>
        <td colspan="3" align="center">杰瑞</td>

    </tr>
    <tr>
        <td>html5</td>
        <td rowspan="2">android</td>
        <td>ios</td>
    </tr>
    <tr>
        <td>html5</td>
        <td>ios</td>
    </tr>
</table>
</table>
<table border="1" width="180px",height="120px">
    <tr>
        <td rowspan="6">
            <img src="../img/15438-106.jpg" alt="" width="30px" height="60px">
        </td>
        <td rowspan="3"></td>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="3"></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
    </tr>
    <tr>

        <td></td>
    </tr>
</table>
</body>
</html>

结果如下

电子产品类
家电类		家具类
文具类			饮
21	21	23	31

张三	语文	100
张三	语文	100
张三	语文	100
张三	语文	100

学生成绩
张三	语文	100
张三	语文	100
张三	语文	100
张三	语文	100

杰瑞
html5	android	ios
html5		ios

3.结构化的表格标签

属性有如下几个：
1.caption:在表格外部加一个标题。
2.thead :表示头部执行代码。
3.tbody:表示内容执行的代码。
4.tfoot:表示尾部执行的顺序。
代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构化的表格标签</title>
</head>
<body boder="1" width="300px">
<!--
<caption></caption>  加一个表格标题
<thead></thead>   表格的头部区域
<tboday></tboday>  表格的内容区域
<tfoot></tfoot>
<colgroup></colgroup>
-->
<table border="1" width="100px">
    <caption>标题</caption>
    <colgroup>
        <col style="background-color: red">
        <col span="2" style="background-color: red">
        <!--<col style="background-color: red">-->
    </colgroup>
    <thead>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
    </tr>
    </thead>


    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

实现如下：
这里写图片描述

jredu1996

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础（二）个人笔记

HTML5基本语法1.表格table 表格的基本属性有： 1.border 边框。 2.width 宽度。 3.height 高度。 4.align 对齐方式。 5.bgcolor 背景颜色。 6.background 背景图片。 7.cellspacing 单元格之间的间距。 8.cellpadding 单元格文本和单元格边框的距离。<!
复制链接

扫一扫