<table> 在HTML 中定义了表格布局。说到 table 标签，我们可以想到的大致有以下几个元素：<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>接下来，我们看看每个元素有什么用，使用后会有怎样的效果。

table 的基本使用

1.<table>

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>table</title><style> table{ height:300px, width:300px } </style></head><body><table border="1" ><caption>table</caption></table></body></html>

有标题的 table

table 的属性如：border、width、height 等，建议写在 css 样式中。<caption> 元素可以设置表格的标题

2.<th>、<tr>和<td>

一个 HTML 表格包括 <table> 元素，一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行
<th> 元素定义表头
<td> 元素定义表格单元
表格由单元格与其内部的文本构成。
HTML 表格有两类单元格：表头单元 - 包含头部信息（由 th 元素创建）标准单元 - 包含数据（由 td 元素创建）
<th> 定义表格内的表头单元格，元素内部的文本通常会呈现为居中的粗体文本。<td> 定义 HTML 表格中的标准单元格，元素中的文本一般显示为正常字体且左对齐。

<table border="1" ><caption>table</caption><tr><th></th><th>姓名</th><th>年龄</th></tr><tr><th>女生</th><td>张莉</td><td>22</td></tr><tr><th>男生</th><td>杨洋</td><td>26</td></tr></table>

简单的 table

colspan 属性规定单元格可横跨的列数。rowspan 属性规定单元格可横跨的行数。

<table border="1"><caption>横跨两列的单元格</caption><tr><th>姓名</th><th colspan="2">电话</th></tr><tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855</td></tr></table><table border="1"><caption>横跨两行的单元格</caption><tr><th>姓名</th><td>Bill Gates</td></tr><tr><th rowspan="2">电话</th><td>555 77 854</td></tr><tr><td>555 77 855</td></tr></table>

3.<thead>、<tbody> 以及 <tfoot>

<thead><tbody><tfoot> 把表格分成多个逻辑区域，以便之后可以用 CSS 更好的控制表现。

thead 元素用于对 HTML 表格中的表头内容进行分组
tbody 元素用于对 HTML 表格中的主体内容进行分组
tfoot 元素用于组合 HTML 表格中的页脚（脚注或表注）内容

<html><head><style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style></head><body><table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table></body></html>

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。** 注释 **：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

以上就是 table 的基本用法，接下来让我们来完成关于 table 的练习作业吧！

练习作业

任务地址：https://bbs.excellence-girls.org/topic/62/任务1-html核心概念和常用标签-创建一个纯html的试卷页面-2周任务需求：

需求

我们先把该表格按下图分为三部分：

这三部分则分别放在 thead、tfoot 以及 tbody 元素内。可以看出表格大致有五行四列，其中名称、小计跨行，而日期、总价跨列。粗体文字的单元格为表头单元，使用 <th>，其他的使用<td>。代码如下：

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>table</title></head><body><table border="1"><caption>购物车</caption><thead><tr><th rowspan="2" >名称</th><th colspan="2" >2016-11-22</th><th rowspan="2" >小计</th></tr><tr><th>重量</th><th>单元</th></tr></thead><tfoot><tr><th colspan="3" >总价</th><td>27元</td></tr></tfoot><tbody><tr><th>苹果</th><td>3公斤</td><td>5元/公斤</td><td>15元</td></tr><tr><th>香蕉</th><td>2公斤</td><td>6元/公斤</td><td>12元</td></tr></tbody></table></body></html>

等等，这就完成了吗？看看需求，我们可以看到每个单元格看起来文本都是居中的，而上面说到 <td> 内的文本是默认居左的。我们尝试给 <td> 加上 css 样式，设置其高度和宽度，可以清楚的看到文本是居左的。

<style> td { height:30px; width:100px } </style>

首先我们尝试的解决方式是让 <td> 内的文本居中。

<style> td{ height:30px; width:100px; text-align:center; } </style>

可以看到文本居中了，但新的问题是需求中的单元格并不是宽度一致的，因此我们应该采用另一种方式：表格内边距。有两种方式可以做到：

css 中的 padding
cellpadding 属性,规定单元边沿与其内容之间的空白。

从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。

`<style> th,td { padding:10px; } </style>

或者

<table border="1" cellpadding="10"></table>`

为单元格加了 padding 的 table

原文链接： https://www.jianshu.com/p/b7b35270d1fa

Table 标签详解相关推荐

css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
前端基础-HTML的的标签详解
阅读目录一.head内常用标签二. HTML语义化三. 字符实体四. h系列标签五. p标签六. img标签七. a标签八. 列表标签九. table标签十. form标签一. ...
HTML基本标签详解与运行截图
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
Div与Span标签详解
Div与Span标签详解一.DIV 1.简介 2.作用 3.案例二.span 1.简介 2.语法 3.案例一.DIV 1.简介在html中布局使用最多标签为div, 我们通常将网页重构说成di ...
web前端 --- HTML标签详解
HTML标签详解 head头标签: meta标签.title标签.link标签.style标签.script标签 body标签: 字体标签: h1~h6标签.font标签.u标签.b标签.strong ...
HTML marquee标签详解
HTML marquee标签详解在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动.而我们使用HTML的Marquee语句则可以产生更多的 ...
W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
Oracle创建表语句(Create table)语法详解及示例
Oracle创建表语句(Create table)语法详解及示例创建表(Create table)语法详解 1. ORACLE常用的字段类型ORACLE常用的字段类型有 VARCHAR2 (si ...
JSF标签详解（全）
转自:https://wenku.baidu.com/view/82b84b255901020207409c87.html :https://blog.csdn.net/qq_36411874/art ...

Table 标签详解