HTML资料之表格

最新推荐文章于 2024-02-16 23:45:17 发布

宅羽

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/sky6even/article/details/79302343

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了HTML表格的主要标签，包括<table>, <tr>, 和<td>，并详细讲解了表格的基本格式、属性、标准结构、标题<caption>的使用、单元格合并以及表头<th>的特性。还探讨了如何实现细线表格的技巧，如设置边框线为0像素并调整单元格间距来达到1像素边框的效果。" 112130652,5268177,config.ini配置详解与抢购防黑策略,"['脚本配置', '抢购技巧', '网页抓取', 'Python', '京东抢购']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ 主要标签：
1.<table>

<table>...</table>标签用于创建表格,包含表格本身的代码。

2.<tr>

<tr>用来表示表格行，多个行结合在一起就构成一个表格。表格的每一行都用<tr>标签表示，并用相应的</tr> 结束

3.<td>

<td>标签表示每一行中的单元格（也可以算是定义了一个列），嵌与<tr>标签中。td是表格数据(Table Data)的英文缩写。

◆ 表格基本格式：

<table>             #表格
    <tr>            #行
        <td>单元格内容</td>   #列
        <td>单元格内容</td>
    </tr>
</table>

示例：

<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
        <tr>
        <td>snow</td>
        <td>18</td>
    </tr>
</table>

显示效果：

姓名	年龄
snow	18

◆ 表格属性：

★ border=”1”         单元格边框粗细，一般设置为1即可，为0是不现实边框。
★ bordercolor="red"  边框颜色
★ bgcolor=”red”      背景颜色
★ width=”500”        单元格宽度
★ height=”300”       单元格高度
★ cellspacing=”2”    单元格与单元格的距离
★ cellpadding=”2”    内容距边框的距离
★ align=”left|right|center”  水平位置：左、右、中
    1、<table align=”center”>，表格居中
    2、<tr align="center">或<td align="center">，tr或者td内容居中。
★ valign=”top|middle|bottom”  垂直位置，仅针对表格内容

◆ 表格的标准结构：
在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体如下所示：

★ <thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
★ <tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<thead></thead>标记之后，一般包含网页中除头部和底部之外的其他内容。
★ <tfoot></tfoot >：用于定义表格的页脚，位于<table></table>标记中<tbody></tbody>标记之后，一般包含网页底部的企业信息等。

示例：

<table>
        <thead>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

◆ 标题<caption></caption>：
对每个表格只能定义一个标题，通常这个标题会居中于表格之上。
示例：

<table>
    <cpation align="center">标题</caption>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
</table>

显示效果：

标题

姓名

年龄

注：align属性可以让表头居中

◆ 单元格合并：

colspan=”2”  #合并同一行上的单元格
rowspan=”2”  #合并同一列上的单元格

示例：

<table border="1">
    <tr>
        <td rowspan="2">单元格</td>
        <td>单元格</td>
    </tr>
        <td>单元格</td>
    </tr>
        <tr>
        <td colspan="2">单元格</td>
    </tr>
</table>

显示效果：

单元格	单元格
	单元格
单元格

◆ 表头 <th></th>：
表头一般位于表格的第一行或第一列，其文本加粗居中，标题的文字自动加粗水平居中对齐。
示例：

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
        <tr>
        <td>snow</td>
        <td>18</td>
    </tr>
</table>

效果显示（因编辑器问题，无法居中，实际为居中）：

姓名	年龄
snow	18

细线表格：
      表格的边框线最小为1像素，所以正常情况下单元格与单元格之间的的边框最小为2像素（相邻的两个单元格各有一条边框线）。为了实现边框为1像素，采取的方法如下：
      1、表格的边框线设置为0像素，并添加背景颜色。然后让单元格之间的距离为1像素。
      2、单元格的背景颜色设置为白色。

原理：单元格之间的距离即为边框。

示例：

<table width="100"  height="100" border="0" bgcolor="green" cellspacing="1">
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>
    <tr bgcolor="white">
        <td></td>
        <td></td>
    </tr>
</table>