8、表格标签

肆悟先生

已于 2023-10-01 11:06:09 修改

阅读量115

点赞数

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

于 2023-10-01 11:04:13 首次发布

本文链接：https://blog.csdn.net/nytcjsjboss/article/details/133459222

版权

HTML 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

本文介绍了HTML中表格标签的使用，包括表格的基本结构（行tr、列td）、跨行(rowspan)和跨列(colspan)的功能，以及如何通过border属性添加边框。通过实例展示了如何创建简单的表格来展示数据。

摘要由CSDN通过智能技术生成

8、表格标签

一、为什么使用表格

简单通用
结构稳定

二、基本结构

（一）单元格

（二）行

行的英语是rows所以，行就用tr表示

（三）列

使用td表示

（四）跨行

（五）跨列

表格标签就是table标签，其中border属性是添加边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<!--表格table
行：tr
列：td
border：表示添加边框
colspan：跨列，横向合并单元格
-->
<table border="1px">
    <tr>
        <!--colspan：跨列-->
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        
    </tr>
</table>
</body>
</html>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
<table border="1px">
  <tr>
      <td colspan="3">学生成绩</td>
  </tr>
  <tr>
      <td rowspan="2">张老师</td>
      <td>数学</td>
      <td>93分</td>
  </tr>
  <tr>
      <td>语文</td>
      <td>90分</td>
  </tr>
  <tr>
      <td rowspan="2">王老师</td>
      <td>美术</td>
      <td>95分</td>
  </tr>
  <tr>
      <td>书法</td>
      <td>97分</td>
  </tr>
</table>
</body>
</html>