晓枫资讯--科技资讯社区»论坛 › 数据库，网络编程。 › HTML5,CSS,HTML。›快速切换版块 › HTML中的表格元素介绍

查看: 5165|回复: 7

HTML中的表格元素介绍

[复制链接]

西格妮·霏霏

离线

TA的专栏

打卡等级：热心大叔
打卡总天数：239
打卡月天数：0
打卡总奖励：7648
最近打卡：2025-03-30 17:26:01

等级头衔

等級：晓枫资讯-上等兵

在线时间: 34 小时

积分成就

威望

0 点

贡献

706 次

主题

675次

精华

0 篇

金钱

9857 枚

积分

1446枚

、

注册时间

2023-1-15

最后登录

2025-3-30

发消息

发表于 2023-8-7 08:45:43 | 显示全部楼层 |阅读模式

:定义行
：定义列

示例：

主要属性：
border:边框的宽度，单位是像素（缺省值是0）
width：表格的宽度，可以用百分比（表示该表格占父标记的宽度），也可以是绝对值
cellpadding:单元格内容与单元格之间的空隙
cellspacing:单元格与单元格之间的空隙
align:对齐方式，值有"center","right","left"
colspan：水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
rowspan：垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数。

<caption>表格的题注：caption元素必须包含在table元素中，而且必须紧跟在<table>的开始标记之后，默认居中显示。

复制代码

语法
开始标记：必须
内容：行内标记
结束标记：必需
主要属性：
align属性：用以确定题注的位置，可以有五种取值
bottom、center、laft、right、top

例如：定义一个基本的表格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>

复制代码

结果：

二、表格美化

1、设置表格的尺寸和边框

width:用来设置表格的宽度
height:用来设置表格的高度
border：用来设置表格边框尺寸大小
bordercolor：用来设置表格边框颜色

<table width="400" height="200" border="15" bordercolor="red">
<tr>
<td colspan="4" align="center">品牌商城</td>
</tr>
<tr>
<td colspan="2">笔记本电脑</td>
<td colspan="2">办公设置、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
</tr>
</table>

复制代码

示例：

2、设置背景图片和背景色

background：属性用来设置表格的背景图片
bgcolor：属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝

<table width="360" height="120" border="2" background="Images\img.jpg">
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="3">笔记本电脑</td>
<td colspan="3" bgcolor="yellow">办公设备、文具、耗材</td>
</tr>
<tr>
<td>IBM</td>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
<td>墨盒</td>
</tr>
</table>

复制代码

示例：

3、设置对齐方式

align：属性用来设置表格、行、列的对齐方式。

有三种取值

left：居左对齐默认
right：居右对齐
center：居中对齐

示例：

4、填充属性和间距属性

cellpadding:单元格填充，用来设置表格内填充距离，表示每一个单元格的厚度，值越大，单元格内容离单元格距离就越大
cellspacing:单元格间距，用来设置表格内框宽度,表示两个单元格之间的距离。值越大，单元格与单元格之间的距离就越大

填充属性和间距属性：

<body>
<table border="20" cellpadding="30" cellspacing="40" bordercolor="red">
<tr bordercolor="green">
<td colspan="4">品牌商城</td>
</tr>
<tr>
<td colspan="2">笔记本电脑</td>
<td colspan="2">办公设备、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
</tr>
</table>
</body>

复制代码

示例：

设置表格的填充属性示例：

5、设置跨行、跨列的表格

colspan：水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
rowspan：垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数。

设置跨多列的表格：

设置跨多行的表格：

设置跨多行多列的表格：

注意：

跨行和跨列都是写在<td>标签里面。

复制代码

6、表格的分组标签

表格分组如下图所示：

例如：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<caption>年终数据报表</caption>
<thead bgcolor="#99FFFF">
<tr>
<th>月份</th>
<th>收入</th>
</tr>
</thead>
<tbody bgcolor="#009966">
<tr>
<td>1月</td>
<td>100</td>
</tr>
<tr>
<td>2月</td>
<td>80</td>
</tr>
<tr>
<td>3月</td>
<td>300</td>
</tr>
<tr>
<td>4月</td>
<td>400</td>
</tr>
<tr>
<td>5月</td>
<td>100</td>
</tr>
<tr>
<td>6月</td>
<td>200</td>
</tr>
</tbody>
<tfoot bgcolor="#FFFF00">
<tr>
<td>平均月收入</td>
<td>196.67</td>
</tr>
<tr>
<td>总计</td>
<td>1180</td>
</tr>
</tfoot>
</table>
</body>
</html>

复制代码

结果：

到此这篇关于HTML表格元素的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

表格元素的作用：用来格式化显示数据。

一、表格的基本结构

表格的基本语法:

      ......

   ......

单元格内容

:定义表格

晓枫资讯-科技资讯社区-免责声明

免责声明：以上内容为本网站转自其它媒体，相关信息仅为传递更多信息之目的，不代表本网观点，亦不代表本网站赞同其观点或证实其内容的真实性。
1、注册用户在本社区发表、转载的任何作品仅代表其个人观点，不代表本社区认同其观点。
2、管理员及版主有权在不事先通知或不经作者准许的情况下删除其在本社区所发表的文章。
3、本社区的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，举报反馈：