HTML学习笔记11-HTML表格

最新推荐文章于 2022-01-06 17:26:02 发布

weeds606

最新推荐文章于 2022-01-06 17:26:02 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/doulihang/article/details/98845950

版权

前端相关专栏收录该内容

42 篇文章 0 订阅

订阅专栏

一、HTML表格定义

1.<table>标签定义表格

2.<tr>标签定义表格的行

3.<td>标签定义单元格

接下来创建一个简单表格，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
        <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>
</body>
</html>

页面显示如下：

二、HTML的表格的边框属性

表格的border属性用于定义表格的边框，如果不定义该属性的话，表格不显示边框。下面来定义一个带边框的表格，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
        <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>
</body>
</html>

页面显示如下：

三、表格的表头

表格的表头使用<th>标签定义，定义表头代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
<table border="1">
    <th>
        表头1
    </th>
    <th>
        表头2
    </th>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
</table>
</body>
</html>

页面显示：

四、制作一个细线表格

1.设置table的bgcolor属性为block

2.设置table的cellspacing属性为1

3.设置tr的gbcolor属性为white

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>细线表格练习</title>
</head>
<body>
<!--cellspacing用于定义细线的宽度-->
<table bgcolor="black" cellspacing="1">
    <tr bgcolor="white">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="white">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
</table>

</body>
</html>

页面效果如下图所示

五、合并单元格

通过给td标签添加属性来达到合并单元格的目的。

colspan用于进行水平合并。rowspan用于进行垂直合并。具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并单元格练习</title>
</head>
<body>
<table bgcolor="black" height="300" width="500" cellspacing="1" align="center">
    <tr bgcolor="white">
        <!--colspan水平方向合并单元格，2表示将2个单元格合并为1个-->
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
        <!--rowspan垂直方向合并单元格-->
        <td rowspan="2"></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>

</table>
</body>
</html>

具体页面实现如下：

weeds606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记11-HTML表格

一、HTML表格定义1.<table>标签定义表格2.<tr>标签定义表格的行3.<td>标签定义单元格接下来创建一个简单表格，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t...
复制链接

扫一扫

专栏目录