前端HTML入门基础4（表格）

最新推荐文章于 2024-07-24 23:00:08 发布

欧买噶噶

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量432

点赞数 3

分类专栏：前端HTML入门基础文章标签：前端 html

本文链接：https://blog.csdn.net/qq_51752841/article/details/136743671

版权

前端HTML入门基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端HTML入门基础4（表格）

表格-基本结构
表格的常用属性
表格的跨行与跨列
常用标签

表格-基本结构

仔细看以下图片

thead、tbody、tfoot：用于将表格分成表头、表体和表尾三个部分，可以通过这些标签进行语义化的组织和样式设置。
caption：用于为表格添加标题，可以通过<caption>标签包裹标题文本。

该表格的对应代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格结构</title>
</head>
<body>
<table border="1">
  <caption>学生信息</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>民族</th>
      <th>政治面貌</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>18</td>
      <td>汉族</td>
      <td>团员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>20</td>
      <td>满族</td>
      <td>群众</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>19</td>
      <td>回族</td>
      <td>党员</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>女</td>
      <td>21</td>
      <td>壮族</td>
      <td>团员</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>共计：4人</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

代码运行结果
在这里插入图片描述

表格的常用属性

在前端开发中，表格是一种常见的元素，用于展示和组织数据。以下是一些常用的表格属性：

border：设置表格边框的宽度，可以通过CSS样式或HTML属性进行设置，例如 border="1" 或者 style="border: 1px solid black;"。
cellpadding：设置单元格内容与单元格边框之间的空白距离，可以通过HTML属性进行设置，例如 cellpadding="5"。
cellspacing：设置单元格之间的间距，可以通过HTML属性进行设置，例如 cellspacing="10"。
width：设置表格的宽度，可以通过CSS样式或HTML属性进行设置，例如 width: 100%; 或者 width="500"。
colspan：指定单元格横跨的列数，可以通过HTML属性进行设置，例如 colspan="2" 表示单元格横跨两列。
rowspan：指定单元格纵跨的行数，可以通过HTML属性进行设置，例如 rowspan="3" 表示单元格纵跨三行。
注意这些都是在表格标签里进行设置的，例如：

<table border="5" width="500" height="500">
....
</table>

<th colspan="2" rowspan="2" align="right" valign="bottom">
...
</th>

<table>标签属性：
border：设置表格边框的宽度。
cellpadding：设置单元格内容与单元格边框之间的空白距离。
cellspacing：设置单元格之间的间距。
width：设置表格的宽度。
align：设置表格在页面中的水平对齐方式。

<tr>标签属性：
align：设置行中单元格的水平对齐方式。

<th>和<td>标签属性：
colspan：指定单元格横跨的列数。
rowspan：指定单元格纵跨的行数。
align：设置单元格中内容的水平对齐方式。
valign：设置单元格中内容的垂直对齐方式。

<caption>标签属性：
align：设置表格标题的对齐方式。

这些属性可以通过HTML属性进行设置，例如 border=“1” 或者 style=“border: 1px solid black;”。通过设置这些属性，可以控制表格的外观、布局和对齐方式。

表格的跨行与跨列

在HTML中，使用colspan属性可以实现跨列，而使用rowspan属性可以实现跨行。具体如下：

跨列(colspan)：
- 通过设置<td>元素的colspan属性，可以指定一个单元格横跨多个列。例如，colspan="2"会使单元格占据两列的宽度。
- 当一个单元格使用了colspan属性后，它所跨越的列数会相应减少，因此要注意表格的总列数和合并后的列数要保持一致。
跨行(rowspan)：
- 类似地，通过设置<td>元素的rowspan属性，可以指定一个单元格纵跨多个行。例如，rowspan="3"会使单元格从当前行开始向下延伸三行的高度。
- 使用rowspan时，同样需要注意表格的总行数和合并后的行数要相匹配。

需要注意的是，在使用这些属性时，需要确保表格的结构逻辑正确，避免因为跨行或跨列而导致的布局混乱。此外，虽然跨行和跨列可以灵活地设计表格布局，但也应适度使用，以免影响表格数据的可读性和网页的可访问性。
例如构建一个这样的表格
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欧买噶的第2个网页</title>
</head>
<body>
</table>
<table border="1" cellspacing="0">
  <caption>课程表</caption>
  <thead>
    <tr>
      <th>1-1</th>
      <th colspan="5">1-2</th>
    
      <th colspan="2">1-7</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
      <td>2-5</td>
      <td>2-6</td>
      <td>2-7</td>
      <td>2-8</td>
    </tr>
    <tr>
      <td rowspan="4">3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
      <td>3-5</td>
      <td>3-6</td>
      <td>3-7</td>
      <td rowspan="4">3-8</td>
    </tr>
    <tr>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
      <td>4-5</td>
      <td>4-6</td>
      <td>4-7</td>
  </tr>
    <tr>
      <td>5-2</td>
      <td>5-3</td>
      <td>5-4</td>
      <td>5-5</td>
      <td>5-6</td>
      <td>5-7</td>
    </tr>
    <tr>
      <td>6-2</td>
      <td>6-3</td>
      <td>6-4</td>
      <td>6-5</td>
      <td>6-6</td>
      <td>6-7</td>
    </tr>
    <tr>
      <td rowspan="2">7-1</td>
      <td>7-2</td>
      <td>7-3</td>
      <td>7-4</td>
      <td>7-5</td>
      <td>7-6</td>
      <td>7-7</td>
      <td rowspan="2">7-8</td>
    </tr>
    <tr>
      <td>8-2</td>
      <td>8-3</td>
      <td>8-4</td>
      <td>8-5</td>
      <td>8-6</td>
      <td>8-7</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
</body>
</html>

代码运行结果：修改每个单元格的内容即可完成了
在这里插入图片描述
总结：第一步N行N列的表格，对每个单元格进行编码，再进行跨行跨列代码的编写，不容易出错

常用标签

1\换行标签：<br>
2\分割标签（分割线）：<hr>
3\保留原格式，保留空格和回车符号：<pre>...</pre>

欧买噶噶

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端HTML入门基础4（表格）

需要注意的是，在使用这些属性时，需要确保表格的结构逻辑正确，避免因为跨行或跨列而导致的布局混乱。此外，虽然跨行和跨列可以灵活地设计表格布局，但也应适度使用，以免影响表格数据的可读性和网页的可访问性。：设置单元格内容与单元格边框之间的空白距离，可以通过HTML属性进行设置，例如。：设置表格边框的宽度，可以通过CSS样式或HTML属性进行设置，例如。：设置表格的宽度，可以通过CSS样式或HTML属性进行设置，例如。：设置单元格之间的间距，可以通过HTML属性进行设置，例如。：用于为表格添加标题，可以通过。
复制链接

扫一扫

专栏目录