一篇文章带你了解HTML表格及其主要属性介绍

简介: 一篇文章带你了解HTML表格及其主要属性介绍

image.png


一、定义一个HTML表格


使用标签定义HTML表格。

标签定义表中的每一行使用。使用标签定义表头。默认情况下,表标题是粗体和居中的。一个表的数据/单元使用 标签定义。

<table style="width:100%">
 <tr>
   <th>Firstnameth>
   <th>Lastnameth>
   <th>Ageth>
 tr>
 <tr>
   <td>Jilltd>
   <td>Smithtd>
   <td>50td>
 tr>
 <tr>
   <td>Evetd>
   <td>Jacksontd>
   <td>94td>
 tr>
table>

image.png

注意: 元素是表的数据容器。它们可以包含所有的HTML元素; 文本、图像、列表、其他表格等。



1. HTML表格 - 添加边框

如果不指定表的边框,则将不显示边框。

使用CSS设置表格的边框如下:

image.png

<style>
table, th, td {
   border: 1px solid black;
}
style>

记住为表和表单元格定义边框。


2. HTML 表格 - 折叠边框

如果你想要的边框折叠成一个边框,添加CSS border-collaps边框属性:

<style>
 table, th, td {
     border: 1px solid black;
     border-collapse: collapse;  /*折叠边框*/
}
style>

image.png


3. HTML 表格 - 添加单元格填充(padding)

单元格填充(padding)指定单元格内容及其边框之间的空间。

如果不指定填充(padding),则将显示表单元格而不填充(padding)。

设置填充,使用css padding属性:

<style>
 table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
}
 th, td {
     padding: 15px; /* 设置边距*/
}
style>

image.png


4. HTML表格 - 左对齐标题

默认情况下,表标题是粗体和居中的。

左对齐的表格标题,使用CSS text-align属性:

th {
   text-align: left;
}

image.png


5. HTML表格 - 添加边框间距

边框间距指定单元格之间的空间。

设置一个表空间的边界,使用CSS border-spacing属性:

table {
   border-spacing: 15px; /*添加边框间距*/
}

注意:如果表已经是collapsed折叠边框,边框间距没有影响。


6. HTML表格 单元格跨多列

使表格单元格跨越多个列,使用colspan属性:

<table style="width:100%">
 <tr>
   <th>姓名th>
   <th colspan="2">电话th>
 tr>
 <tr>
   <td>Bill Gatestd>
   <td>55577854td>
   <td>55577855td>
 tr>
table>

image.png


7. HTML表中 - 单元格跨多行

使表格单元格跨多个行,使用rowspan属性:

<table style="width:100%">
 <tr>
   <th>姓名:th>
   <td>比尔td>
 tr>
 <tr>
   <th rowspan="2">电话:th>
   <td>55577854td>
 tr>
 <tr>
   <td>55577855td>
 tr>
table>

image.png


8. HTML表格 - 添加标题

若要向表添加标题,请使用`标签:

<table style="width:100%">
 <caption>每月储蓄caption> 
 <tr>
   <th>月th>
   <th>储蓄th>
 tr>
 <tr>
   <td>Januarytd>
   <td>$100td>
 tr>
 <tr>
   <td>Februarytd>
   <td>$50td>
 tr>
table>

image.png

注意:` 标签必须立即插入在``标签之后。



二、项目


为表格指定一个特殊样式

为表格指定一个特殊样式, 添加一个 id 属性:

<table id="t01">
 <tr>
   <th>Firstnameth>
   <th>Lastnameth>
   <th>Ageth>
 tr>
 <tr>
   <td>Evetd>
   <td>Jacksontd>
   <td>94td>
 tr>
table>

现在您可以为这个表定义一个特殊的样式:

table#t01 {
   width: 100%;
   background-color: #f1f1c1;
   border: 2px solid black;
}

image.png

添加更多样式:

table#t01 tr:nth-child(even) {
   background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color: #fff;
}
table#t01 th {
   color: white;
   background-color: black;
}

image.png


小总结

标签 描述
<table> 定义表格
<th> 定义表中的头单元格
<tr> 定义表中的一行
<td> 定义表中的单元格
<caption> 定义一个表格标题
<colgroup> 指定表格中一组或多个列的格式.
<col> 指定列内每个列的属性用. <colgroup> 元素
<thead> 使用表中的标题内容分组
<tbody> 将身体内容分组在一个表中

属性 描述
border 属性定义一个边框
border-collapse 定义折叠单元格边框的属性
padding 添加到单元格中的填充
text-align 对齐单元格文本
border-spacing 设置单元格之间的间距
colspan 使单元格跨越多个列
rowspan 使单元格跨越多行
id 唯一表示一个表格


三、总结


本文主要介绍了HTML表格,对表格中主要的属性进行了详细的介绍。对遇到的问题进行详细的解答。方便大家表格的标签的了解。希望对大家的学习有帮助。

相关文章
|
11天前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
26天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
48 12
|
1月前
|
搜索推荐 前端开发 UED
哪些 HTML 全局属性在 SEO 优化中比较重要?
【10月更文挑战第27天】这些HTML全局属性通过不同的方式为搜索引擎提供了更丰富、准确的页面信息,有助于提高页面的可索引性、相关性和用户体验,从而在SEO优化中发挥着重要的作用。开发者应充分重视并合理运用这些属性,以提升网站在搜索引擎中的排名和流量。
|
1月前
|
前端开发 搜索推荐 算法
|
1月前
|
前端开发 JavaScript 开发者
HTML 中的全局属性和局部属性是否可以相互覆盖?
【10月更文挑战第27天】HTML中的全局属性和局部属性在正常使用情况下不会相互覆盖,但在涉及CSS样式和JavaScript操作等特殊情况下,可能会出现类似覆盖的效果。开发者需要理解属性的功能、作用域和优先级,遵循最佳实践,以确保HTML文档的结构清晰、功能正常且易于维护。
|
1月前
|
存储 移动开发 前端开发
HTML全局属性
【10月更文挑战第27天】
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
1月前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。