HTML资料之表格

本文介绍了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>

显示效果:

姓名年龄
snow18



◆ 表格属性:

★ 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>

效果显示(因编辑器问题,无法居中,实际为居中):

姓名年龄
snow18



细线表格:
      表格的边框线最小为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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值