<table>
标签
定义 HTML 表格。一个 HTML 表格包括 <table>
元素,一个或多个<tr> 行
、<th> 表头
以及<td> 单元格
元素。更复杂的 HTML 表格也可能包括 <caption>
、<col>
、<colgroup>
、<thead>
、<tfoot>
以及 <tbody>
元素。
属性 | 值 | 描述 |
---|---|---|
cellpadding | pixels | 规定单元边沿与其内容之间 的空白。 |
cellspacing | pixels | 规定单元格之间 的空白。 |
rules | none groups rows cols all | 规定内侧边框的哪个部分是可见的。 |
<p>位于行之间的线条:</p>
<table rules="rows">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>位于列之间的线条:</p>
<table rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>位于行和列之间的线条:</p>
<table rules="all">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<caption>
标签
定义表格的标题,必须直接放置到 <table>
标签之后,只能对每个表格定义一个标题。
<colgroup>
标签
- 用于对表格中的列进行组合,以便对其进行格式化。
-
<col>
标签 规定了 元素内部的每一列的列属性。
span 属性 : number ,规定<col>
,<colgroup>
元素应该横跨的列数。
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
<thead>、<tbody>、<tfoot>
标签
-
<thead>
元素的使用条件: -
1、
<thead>
、<tbody>
和<tfoot>
元素结合起来使用(表头、主体、页脚)。 -
2、必须作为
<table>
元素的子元素,出现在<caption>、<colgroup>
元素之后,<tbody>、 <tfoot> 和 <tr>
元素之前。
<style type="text/css">
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
<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>
<tr>
标签
定义 HTML 表格中的行,一个 <tr>
元素包含一个或多个 <th>
或 <td>
元素。
属性 | 值 | 描述 |
---|---|---|
colspan | number | 规定单元格可横跨的列数 |
rowspan | number | 规定单元格可横跨的行数 |
valign | top middle bottom baseline | 规定单元格内容的垂直排列方式 |
align | right left center justify char | 定义单元格行的内容对齐方式 |
valign | top middle bottom baseline | 规定表格行中内容的垂直对齐方式。 |
<table border="1">
<caption>Monthly savings</caption> //表格标题:Monthly savings
<!--表头一栏,包含了两个表头单元格,两列两行-->
<tr>
<th valign="middle">Month</th> //垂直居中对齐
<th valign="bottom">Savings</th> //垂直向底部对齐
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>