HTML-table表格详解

置顶 已于 2023-01-01 15:00:43 修改
阅读量2.1w 收藏 38
点赞数 6
分类专栏： html 文章标签： html 前端 css web css3
于 2022-11-17 23:31:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64933233/article/details/127914110
版权
本文详细介绍了HTML中的表格创建，包括表格的基本结构、表头和边框样式设置，以及长表格的结构与补充。通过table、tr、td、th等标签的使用，解释了rowspan和colspan属性，以及如何利用border-spacing和border-collapse控制边框样式。同时，文章还讨论了表格在页面布局中的历史角色，强调了现在CSS布局已替代表格布局的方式。
摘要由CSDN通过智能技术生成

文章目录

表格

表格的说明(创建一个表格)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" width="40%" align="center">
      <tr>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
      </tr>
      <tr>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td rowspan="2">B4</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
      </tr>
      <tr>
        <td>D1</td>
        <td>D2</td>
        <td colspan="2">D3</td>
      </tr>
    </table>
  </body>
</html>

请添加图片描述

1. 说明

  1. 表格在日常生活中使用非常多，比如 excel 就是专门用来创建表格的工具，
    • 表格就是由用来表示一些格式化的数据的，比如：额课程表，银行对账单
  2. 在网页中也可以创建出不同的表格。

2. 设置

  1. 在 HTML 中，使用 table 标签来创建一个表格
<table border="1" width="40%" align="center"></table>
  1. 在 table 中使用 tr 来表示表格中的一行，有几行就有几个 tr
    • 在 tr 中需要使用 td 来创建一个单元格，有几个单元格就有几个 td
<tr>
  <td>A1</td>
  <td>A2</td>
  <td>A3</td>
</tr>

<tr>
  <td>B1</td>
  <td>B2</td>
  <td>B3</td>
</tr>

<tr>
  <td>C1</td>
  <td>C2</td>
  <td>C3</td>
</tr>

<tr>
  <td>D1</td>
  <td>D2</td>
  <td>D3</td>
</tr>
  1. rowspan 用来设置的纵向的合并单元格
<td rowspan="2">B4</td>
  1. colspan 横向的合并单元格
<td colspan="2">D3</td>

表头和表格边框样式设置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      table {<
最低0.47元/天 解锁文章
王十四兄
关注
专栏目录
前端学习笔记一一HTML表格标签（table）
pig_html的博客
12-08 2091
前言 表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但是在实际制作过程中，表格更多用在网页布局的定位上。很多网页都是以表格布局的。这是因为表格在文本和图像的位置控制方面都有很强的功能。 1.表格的基本构成 表格由行、列、和单元格3部分组成，一般通过3个标记来创建，分别是表格标记<table>、行标记<tr>、和单元格标记<td>。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才
HTML表格table
weixin_58139900的博客
09-15 2084
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
HTML表格使用全指南，真的很详细
(黎子)人生编码
06-20 2213
通过使用CSS媒体查询和JavaScript，开发者可以创建出既美观又实用的表格，确保用户在任何设备上都能获得良好的浏览体验。通过合理的语义化标签使用，开发者可以创建出既美观又易于理解的表格。通过使用适当的属性和技巧，我们可以提高表格的可访问性。通过CSS样式设计和布局控制，HTML表格不仅可以提供清晰的数据展示，还能成为网页上的美观元素。跨行和跨列是表格设计中常用的技术，用于合并单元格，使表格布局更加灵活和紧凑。控制表格的布局对于确保数据的可读性和表格的整体美观至关重要。标签进行表格的语义化。
【HTML+CSS】HTML表格：从基础到进阶的全面指南
最新发布
Xiaoxin的博客
07-26 1350
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
HTML【详解】表格 table 标签（table的属性，语义化表格，简易表格，合并单元格）
朝阳39的博客
07-05 1121
html 中的表格<table>由行<tr>组成，每行由单元格<td>组成。所以表格是由行组成（行由列组成），而不是由行和列组成。table 标签，属于块级元素。
html表格（table）
weixin_46191548的博客
01-26 8388
表格标签： table：是整个表格的框架。 tr：单元行。 td：单元格。 table，tr，td三者的关系：td<tr<table，这里没有列的概念。 th：表头，如果有需要的话，表格的第一行替代所有的td。 caption：表格的标题，写在table之中，tr之前。 合并单元格： rowspan：垂直合并（跨列），占用下一行的一个单元格 colspan：水平合并（跨列），在本行自身...
HTML 中的Table标签
AI_dkx的博客
06-30 4367
Table标签如何使用，Table页面布局，Table属性介绍
html_table
like_eat_apple的博客
11-18 498
<html></html>
表格
cnfbd的博客
12-26 260
表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格和边框属性 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 使用边框属性来显示一个带有边框的表格： 表格的表头使用 ...
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
总之，理解并熟练掌握Vue的`v-for`指令以及如何与ElementUI的`el-table`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助...
详解angularjs popup-table 弹出框表格指令
10-19
本文将详解AngularJS中的popup-table指令，该指令用于在网页中创建弹出框样式的表格组件。 在深入理解popup-table指令之前，先了解几个关键点是非常必要的。首先，AngularJS中的指令是通过定义一个新元素或者属性来...
bootstrap table表格使用方法详解
11-29
Bootstrap Table 是一个基于 Bootstrap 框架的轻量级组件，用于创建美观、响应式的表格。这个组件提供了许多实用的功能，如数据加载、分页、排序、搜索等，且易于定制和扩展。以下是对 `bootstrap table` 使用方法的...
HTML中的table标签属性
a1k2l45k的博客
06-19 2038
和和和
HTML中 table
wangtao的博客
12-22 718
1.Html中的表格的结构 1.表格(table)&gt;行（tr） &gt;单元格（td）    &lt;table&gt;      &lt;tr&gt;          &lt;td&gt;&lt;/td&gt;      &lt;/tr&gt;     &lt;/table&gt; 2.基本结构的特点 a.三个标签都是表格的基本构成结构，缺一不可且嵌
HTML常见标签——表格＜table＞标签、表格标签常见的属性、表格的跨行合并和跨列合并
weixin_64294248的博客
07-12 3533
HTML中的表格是用于用于统计、展示结构化数据的标记语言元素。表格标签是双标签，写作。每个表格分为表格标题（由 标签定义），以及表格单元格（由 标签定义），表格标题和表格身体中均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义），表格可以包含标题行（）用于定义列的标题，其中标题行（）会有默认加粗的效果。
html语言<table>,html中的table详解
weixin_39777637的博客
05-31 404
普通表格，简单的HTML表格由table元素以及tr、td和th元素组成，其中tr是指表格行，td是指单元格，th定义表头。空单元格就直接不填即可，或者用。表头表头表头单元格1单元格32.带有边框的表格。border元素表示表格的边框,默认单位是px，cellspcing表示表格与表格之间的间距，cellpadding表示内边距/内填充的距离。表头表头表头单元格1单元格2单元格33.带有背景图片...
html table
MCC_3599的博客
10-13 292
&lt;tr&gt;表示一行的内容 table row 每一行里再定义每一列的显示 &lt;th&gt; 表头 table header 用于定义表头，即列标题或 行表示。一般默认粗体显示。 &lt;td&gt; 用于定义单元格的内容 table date &lt;tr&gt; &lt;td&gt; 201601 &lt;/td&gt; &lt;td&gt; shaofa &am
table html
09-24 90
<html><head><title>demo-110101</title><style type="text/css">table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1p...
html中table
03-07
HTML中的table是一种用于展示数据的标签，它由行和列组成，可以创建一个类似于Excel表格的结构。以下是关于HTML中table的介绍： 1. 表格结构：HTML中的table由<table>标签定义，每一行由<tr>标签定义，每一列由<td>标签定义。可以使用<th>标签定义表头。 2. 表格内容：可以在<td>标签中插入文本、图像或其他HTML元素来填充表格的内容。 3. 表格样式：可以使用CSS来设置表格的样式，如设置边框、背景色、字体等。 4. 表格合并：可以使用colspan属性来合并列，使用rowspan属性来合并行，以创建更复杂的表格结构。 5. 表格标题：可以使用<caption>标签来定义表格的标题，位于<table>标签之前。 6. 表头和表体：可以使用<thead>、<tbody>和<tfoot>标签来分组表格的表头、表体和表尾。 7. 表格边框：可以使用border属性来设置表格的边框大小。 8. 表格布局：可以使用CSS的布局属性来控制表格的宽度、高度和对齐方式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王十四兄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值