用HTML做表格

最新推荐文章于 2024-07-26 14:13:22 发布

cb++

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量2.1k

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/weixin_44768794/article/details/108548227

版权

HTML做表格

1创建表格
- 1.1详解表格的行、列及单元格
2表格美化
3表格内容
- 3.1内容美化
- 3.2单元格间距

1创建表格

1.1详解表格的行、列及单元格

表格标签：table
行标签：tr
单元格标签:td

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

2表格美化

2.1添加边框

添加边框元素：border

下面展示 边框添加代码。

<table border="1">
</table>

给表格加边框,改变数字大小即可选择所需的边框宽度
在这里插入图片描述

2.2修改表格的宽和高

修改宽元素：width
修改高元素：height

下面展示一些 宽高修改代码。

<table border="10"  width="300" height="300">
</table>

在这里插入图片描述

2.3表格对齐

设置表格相对于页面的对齐方式：align
(加在table标签上)

<table align="center" border="1"  width="300" height="300">

在这里插入图片描述

3表格内容

3.1内容美化

加粗标签：b
设置单元格文本对齐方式：align
（加在td标签上）
表头标签：th

下面展示一些 加粗，居中演示代码片。

<td align="center"><b>1.1</b></td>

表头标签示例：效果与加粗、居中相同。

<th>1.2</th>

在这里插入图片描述

3.2单元格间距

单元格间距元素：cellsapcing## 标题

<table align="center" border="1"  width="300" height="300" cellspacing="10">

在这里插入图片描述

cb++

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
用HTML做表格

HTML做表格1创建表格1.1详解表格的行、列及单元格2表格美化2.1添加边框2.2修改表格的宽和高2.3表格对齐3表格内容3.1内容美化3.2单元格间距1创建表格1.1详解表格的行、列及单元格表格标签：table行标签：tr单元格标签:td<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <title>表格标签</title>
复制链接

扫一扫