html简单的表格制作

看一个简单的样例

标题 1 标题 2 标题 3
文字 文字 文字
文字 文字
<table border="1">
    <tr>
        <th align="left">标题 1</th>   <!-- 左对齐 -->
        <th align="center">标题 2</th> <!-- 居中对其(默认)-->
        <th align="right">标题 3</th>  <!-- 右对齐-->
    </tr>
    <tr>
        <td rowspan="2">col 11</td>
        <td>col 12</td>
        <td>col 13</td>
    </tr>
    <tr>
        <td>col 22</td>
        <td>col 23</td>
    </tr>
</table>

首先,讲解结构

HTML 表格的基本结构:

<table></table>:定义表格

<th></th>:定义表格的标题栏(文字加粗)
<tr></tr>:定义表格的行

<td></td>:定义表格的列

解析:
也就是说最外层是table,然后由若干个行tr组成,在若干个tr内有若干个列td组成.
标题由th封装
如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。使用边框属性border来显示一个带有边框的表格.

合并单元格

合并单元格,合并的顺序我们按照 先上 后下 先左 后右 的顺序 ,合并完之后需要删除多余的单元格。

跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”

相关推荐

  1. html简单表格制作

    2023-12-06 07:04:06       36 阅读
  2. 制作一个简单HTML个人网站

    2023-12-06 07:04:06       32 阅读
  3. 制作一个简单html网页

    2023-12-06 07:04:06       29 阅读
  4. 制作一个简单HTML个人网页

    2023-12-06 07:04:06       22 阅读
  5. 制作一个简单HTML个人网页

    2023-12-06 07:04:06       17 阅读
  6. 【教你如何制作一个简单HTML个人网页】

    2023-12-06 07:04:06       21 阅读
  7. 【教你如何制作一个简单HTML个人网页】

    2023-12-06 07:04:06       21 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-06 07:04:06       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-06 07:04:06       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-06 07:04:06       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-06 07:04:06       20 阅读

热门阅读

  1. 汽车标定技术(十一)--XCP应用场景分析

    2023-12-06 07:04:06       42 阅读
  2. 企业中 Docker 的 Swarm 使用及作用详解

    2023-12-06 07:04:06       27 阅读
  3. flask-sqlalchemy的配置、字段说明

    2023-12-06 07:04:06       41 阅读
  4. AIGC: 关于ChatGPT中token和tiktoken工具

    2023-12-06 07:04:06       56 阅读
  5. Hive的安装配置、初始化元数据、启动

    2023-12-06 07:04:06       31 阅读