HTML基础三：表格

最新推荐文章于 2021-06-26 12:26:03 发布

Daniel_WL

最新推荐文章于 2021-06-26 12:26:03 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：表格

本文链接：https://blog.youkuaiyun.com/Daniel_WL/article/details/89092894

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML表格的基本用法，包括table、tr、td和th等标签的使用，以及border、cellpadding等属性的作用。同时，文章还讲解了如何利用表格进行传统布局的方法。

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

html表格

table常用标签

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性：

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局：

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：

1、快速制作用于演示的html页面

2、商业推广EDM制作(广告邮件)

表格常用样式属性

border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个网页</title>
</head>
<body>
<!--表格-->
<table border="1" cellpadding = 100 align = left valign="top">声明一个表格
    <tr>
        <th>表头
            <td></td>
            <td></td>
        </th>
    </tr>
</table>
</body>
</html>