HTML|表格标签

最新推荐文章于 2024-09-20 21:04:52 发布

Alan_Lowe

最新推荐文章于 2024-09-20 21:04:52 发布

阅读量122

点赞数 1

分类专栏： # HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_45985728/article/details/118916979

版权

HTML 专栏收录该内容

26 篇文章 5 订阅

订阅专栏

HTML|表格标签

1.表格

为什么要使用表格：

简单通用
结构稳定

表格的基本结构：

单元格
行
列
跨行
跨列

2.建立表格

使用table标签生成表格，再table标签内使用tr标签（table row）生成一行，在行标签中使用td标签即可在该行展示若干列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>

<!--
表格标签
大标签：table
行标签：tr(table row)
列标签：td
-->
<table border="1px">
  <tr>
    <td>科目</td>
    <td>语文</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>You</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>99</td>
    <td>99</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述

3.边框

上诉表格是没有边框，我们可以给table添加上border属性生成边框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>

<!--
表格标签
大标签：table
行标签：tr(table row)
列标签：td
border标签：为表格生成边框
-->
<table border="1px">
  <tr>
    <td>科目</td>
    <td>语文</td>
    <td>数学</td>
  </tr>
  <tr>
    <td>You</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>99</td>
    <td>99</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述

4.跨列

我们怎么样实现跨列呢？比如上诉的我要将语文和数学合并为分数应该怎么样做呢？

我们需要将第一行的第三个列（数学）删除，并且给第二列添加上colspan属性=2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>

<!--
表格标签
大标签：table
行标签：tr(table row)
列标签：td
border标签：为表格生成边框
colspan属性：跨列
-->
<table border="1px">
  <tr>
    <td>科目</td>
    <td colspan="2">分数</td>
  </tr>
  <tr>
    <td>You</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Alan</td>
    <td>99</td>
    <td>99</td>
  </tr>
</table>

</body>
</html>

在这里插入图片描述

5.跨行

同上，使用colspan属性

如果我们要将You和Alan合并为一个单元格叫做你们，我们就可以将You所在位置添加上rowspan属性=2，并且删除Alan所在单元格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>

<!--
表格标签
大标签：table
行标签：tr(table row)
列标签：td
border标签：为表格生成边框
colspan属性：跨列
rowspan属性：跨行
-->
<table border="1px">
  <tr>
    <td>科目</td>
    <td colspan="2">分数</td>
  </tr>
  <tr>
    <td rowspan="2">你们</td>
    <td>100</td>
    <td>100</td>
  </tr>
  <tr>
    <td>99</td>
    <td>99</td>
  </tr>
</table>

</body>
</html>