HTML表格

Posted 2020-07-27 逝意遨游

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML表格相关的知识，希望对你有一定的参考价值。

table标签 -- 代表html表格

table标签是成对出现的,以<table>开始,以</table>结束
属性
- Common -- 一般属性
- summary -- 代表表格的摘要说明
- width -- 代表表格的宽度
- border -- 代表表格边框(此属性应该使用CSS实现)
- cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
- cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
table，中文"表格"的意思

示例

<table width="80%" border="1">
    <tr>
        <th>种类</th>
        <th>数量</th>
        <th>售价</th>
        <th>净赚</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>1000</td>
        <td>5</td>
        <td>3</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>500</td>
        <td>5</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>桃子</td>
        <td>7000</td>
        <td>8</td>
        <td>6</td>
    </tr>
</table>

HTML tr 标签

tr标签 -- 代表HTML表格中的一行

tr标签是成对出现的,以<tr>开始,</tr>结束
属性
- Common -- 一般属性
- align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify(两端对齐))(此属性应该使用CSS实现)
- valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
tr，是"table row"的缩写，中文"表行"

HTML th 标签

th标签 -- 代表HTML表格中的表头

th标签是成对出现的,以<th>开始,</th>结束
属性
- Common -- 一般属性
- abbr -- 代表表头的简写
- axis -- 对单元格在概念上分类
- colspan -- 一行跨越多列
- headers -- 连接表格的数据与表头
- rowspan -- 一列跨越多行
- scope -- 定义行或列的表头
- align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify(两端对齐))(此属性应该使用CSS实现)
- valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
th，是"table header cell"的缩写，中文"表头单元格"

HTML td 标签

td标签 -- 代表HTML表格中的一个单元格

td标签是成对出现的,以<td>开始,</td>结束
属性
- Common -- 一般属性
- abbr -- 代表表头的简写
- axis -- 对单元格在概念上分类
- colspan -- 一行跨越多列
- headers -- 连接表格的数据与表头
- rowspan -- 一列跨越多行
- scope -- 定义行或列的表头
- align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify(两端对齐))(此属性应该使用CSS实现)
- valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
td，是"table data cell"的缩写，中文"表中的数据单元"

HTML cellpadding与cellspacing属性

先介绍一些概念

单元格(cell) -- 表格的内容
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/

技术分享

上图说明了表格的几个属性,其中黑色部分就是单元格(cell)，白色的区域是单元格边距(表格填充)，灰色的区域是单元格间距(表格间距)。

HTML rowspan 属性

rowspan可以实现HTML表格中一列跨越多行

rowspan通常使用在td与th标签中
row:行,span:跨度,跨距,范围

HTML colspan 属性

colspan 属性 -- 可以实现HTML表格中一行跨越多列

colspan通常使用在td与th标签中
col:列,span:跨度,跨距,范围

自定义列样式

表格一般都是一行一行的存在的,通过使用colgroup,col与css,可以个性化的显示一个列.

HTML colgroup 标签

colgroup 标签 -- 表示对HTML表格进行结构化的分区,在此分区中可以通过使用col定义每列表格的样式

colgroup标签是成对出现的,以<colgroup>开始,以</colgroup>结束
属性
- Common -- 一般属性
- span -- 定义一个colgroup跨越的列数,默认值为1

HTML col 标签

col标签 -- 可以对HTML表格结构化分区后的一个或几个区域使用同样的样式行

col标签是单独出现的,<col />
属性
- Common -- 一般属性
- span -- 定义一个col跨越的列数,默认值为1

示例

<table border="1">
    <colgroup>
        <col />
        <col class="yellow" />
        <col />
        <col span="2" class="blue" />
    </colgroup>

 <tr>
        <th>种类</th>
        <th>数量</th>
        <th>售价</th>
        <th>净赚</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>1000</td>
        <td>5</td>
        <td>3</td>
    </tr>