表格占据整个页⾯_HTML+CSS基础知识-表格
⼀、表格元素
1、概述
注意：boder必须设置，⽅便看效果
表格是⼀组由⾏和列组成的结构化数据集，可以将不同类型的数据集成在⼀张表中以显⽰不同类型数据之间存在的某种关系
（和平常⽤的表格⼀样，⾏、列、单元格）
HTML 页⾯中提供的表格元素如下：
<table boder='1'>
<tr>
<td>单元格</td>
</tr>
</table>
<table> 元素：表⽰ HTML 页⾯中的⼀个表格，作为表格的容器。
<tr> 元素：表⽰ HTML 页⾯中⼀个表格的⾏。⼀个表格可以拥有⼀⾏或多⾏。
<td> 元素：表⽰ HTML 页⾯中的⼀个表格中⼀⾏的单元格。⼀⾏可以拥有⼀个单元格或多个单元格。
2、标题单元格
HTML <th> 元素⽤来定义为⼀组单元格的标题。该元素的⽤法与 <td> 元素保持⼀致，定义在 <tr> 元素中。
如下⽰例代码展⽰了 <th> 元素的⽤法：
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<th> 元素中的⽂本内容在浏览器运⾏时会⾃动加粗并且居中显⽰的效果。
<th> 元素的 scope 属性⽤来定义与该标题单元格相关联的单元格，是⼀个枚举类型，具体的值如下所⽰：
row：表⽰当前标题单元格关联⼀⾏中的所有单元格。
col：表⽰当前标题单元格关联⼀列中的所有单元格。
rowgroup：表⽰当前标题单元格属于某⼀个⾏组并与其中所有单元格相关联。
colgroup：表⽰当前标题单元格属于某⼀个列组并与其中所有单元格相关联。
auto：由浏览器⾃动分配。
如下⽰例代码展⽰了 <th> 元素的 scope 属性的⽤法：
<table boder="1">
<tr>
<th scope="col">Name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</table>
3、表格的标题
HTML <caption> 元素⽤来定义 HTML 页⾯中表格上⽅的标题。
该元素⼀般作为 <table> 元素的第⼀个⼦级元素出现，同时会显⽰在表格内容中的最前⾯，并且会在⽔平⽅向居中显⽰。<table>
<caption>Color names and values</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</table>
4、跨⾏与跨列（合并单元格）
实质：合并单元格
colspan 属性：⽤来规定表格单元格可横跨的列数。
rowspan 属性：⽤来规定表格单元格可横跨的⾏数。
<table>
<caption>Web前端课程</caption>
<tr>
<th></th>
<th scope="col">设计与构建静态⽹站</th>
<th scope="col">JavaScript基础核⼼语法</th>
</tr>
<tr>
<th scope="row">是否完成</th>
<td colspan="2">已完成</td>
</tr>
</table>
5、长表格（语义）
HTML 页⾯还提供如下 3 个元素来丰富表格：
<thead> 元素：⽤来定义 HTML 页⾯中表格的标题单元格的⾏。
<tbody> 元素：⽤来定义 HTML 页⾯中表格的主体（表格中真正的数据内容）。
<tfoot> 元素：⽤来定义 HTML 页⾯中表格⼀组各列的汇总⾏。
如下⽰例代码展⽰了 <thead> 元素、<tbody> 元素和 <tfoot> 元素的⽤法：
<table>
<caption>Color names and values</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
table设置内边框<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</tbody>
</table>
<thead> 元素、<tbody> 元素和 <tfoot> 元素不会使表格更易于屏幕阅读器⽤户访问，也不会造成任何视觉上的改变。然⽽，它们在应⽤样式和布局上会起到作⽤，可
⼆、表格样式
1、表格布局
实质：auto是⾃适应，随着每个新的单元格都要改变整体布局，⽽fixed当第⼀⾏单元格固定以后的单元格都被固定
CSS table-layout 属性⽤来实现表格中单元格的布局，⾏和列的计算。该属性具有如下 2 个值：
auto：默认值，浏览器会使⽤⾃动表布局算法，已达到表格及其单元格的宽度被调整以适应内容。
fixed：表格或表格中列的宽度是由表格中第⼀⾏单元格的宽度决定的，后续⾏的单元格则不会影响表格中列的宽度。
以上两个值产⽣的结果可能不同，但两者之间最⼤的差异主要是速度上的。相对 fixed 的速度更快，⽽ auto 的速度稍慢，原因如下：
fixed：之所以速度快，主要原因是⼀旦浏览器解析了表格中第⼀⾏单元格的宽度就可以呈现整个表格，⽽不依赖表格中单元格的内容。
auto：表格的 width 属性的值为 auto 就会触发这种⽅式，⽆论 table-layout 属性的值是什么。这种⽅式之所以速度慢，主要原因在于每渲染⼀个新的单元格都要完成整如下⽰例代码展⽰了 table-layout 属性的⽤法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-layout属性</title>
<style>
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border: 1px solid #139;
border: 1px solid #139;
width: 100%;
}
td,
th {
border: 2px solid #a19;
padding: .25rem .5rem;
}
#example-element {
table-layout: auto;
}
</style>
</head>
<body>
<table id="example-element"> <tbody>
<tr>
<th>姓名</th>
<th>地点</th>
</tr>
<tr>
<td>李雷</td>
<td>北京</td>
</tr>
<tr>
<td>韩梅梅</td>
<td>上海</td>
</tr>
<tr>
<td>露西</td>
<td>深圳</td>
</tr>
<tr>
<td>⼩明</td>
<td>鹤岗</td>
</tr>
</tbody>
</table>
</body>
</html>
2、表格标题
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论