table标签

最新推荐文章于 2023-09-11 22:32:58 发布
最新推荐文章于 2023-09-11 22:32:58 发布
阅读量7.4k 收藏 35
点赞数 9
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50931436/article/details/117339557
版权

<table> 标签用来定义表格。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

table的属性与用法

表格标签
表格意义
<table>定义表格
<thead>定义表格的页眉。
<tbody>定义表格的主题。
<tfoot>定义表格的页脚。
<th>定义表格的表头。
<tr>定义表格的行。
<td>定义表格的列。

1.<table>

1.1border

用于设置表格边框的宽度

 

不加border属性：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<table>
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
        </tr>
        <tr>
             <td>二行一列</td>
             <td>二行二列</td>
             <td>二行三列</td>
        </tr>
        <tr>
             <td>一行一列</td>
             <td>一行二列</td>
             <td>一行三列</td>
        </tr>
    </table>
</body>
</html>

代码运行结果：

添加border属性：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<table border="1">
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
        </tr>
        <tr>
             <td>二行一列</td>
             <td>二行二列</td>
             <td>二行三列</td>
        </tr>
        <tr>
             <td>一行一列</td>
             <td>一行二列</td>
             <td>一行三列</td>
        </tr>
    </table>
</body>
</html>

代码运行结果：

 

1.2、width和height用来设置表格的宽度与长度(可以使用像素和百分比两种方式)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<table border="1" width="100" height="80%">
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
        </tr>
        <tr>
             <td>二行一列</td>
             <td>二行二列</td>
             <td>二行三列</td>
        </tr>
        <tr>
             <td>一行一列</td>
             <td>一行二列</td>
             <td>一行三列</td>
        </tr>
    </table>
</body>
</html>

代码运行结果：

1.3、align

设置表格的对齐方式，属性值有left(左对齐(默认))、center(居中)、right(右对齐)三种

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
</head>
<body>
	<table border="1" width="100" height="60" align="center">
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
        </tr>
        <tr>
             <td>二行一列</td>
             <td>二行二列</td>
             <td>二行三列</td>
        </tr>
        <tr>
             <td>一行一列</td>
             <td>一行二列</td>
             <td>一行三列</td>
        </tr>
    </table>
</body>
</html>

 

代码运行结果：

1.4cellspacing和cellpadding

cellspacing:规定单元格之间的空白。(单位：px;)

cellpadding:规定单元边沿与其内容之间的空白。(单位：px；)

 

只设置cellspacing的值时

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table width="80" height="100" align="center" border="1" cellspacing="1">
       <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tfoot>
			<tr>
				<td>总和</td>
				<td>190</td>
			</tr>
        </tfoot>
        <tbody>
        <tr>
             <td>张三</td>
             <td>97</td>
        </tr>
        <tr>
             <td>李四</td>
             <td>93</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

代码运行结果：

当cellspacing的值等于0时，就和我们平时看见的表格一样。

只设置cellpadding的值时

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table width="80" height="100" align="center" border="1" cellpadding="1">
       <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tfoot>
			<tr>
				<td>总和</td>
				<td>190</td>
			</tr>
        </tfoot>
        <tbody>
        <tr>
             <td>张三</td>
             <td>97</td>
        </tr>
        <tr>
             <td>李四</td>
             <td>93</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

代码运行结果：

我们可以通过设置table中的属性来改变table的样式，如:width,height,border，align,cellspacing,cellpadding等。

 

2.<thead>、<tbody>和<tfoot>

这三个标签可以将表格分成多个板块，便于区分

  • <thead>:定义表格的页眉。
  • <tbody>:定义表格的主题。
  • <tfoot>:定义表格的页脚。

<caption>:定义表格标题。

<th>:定义表格的表头。(文字会加粗并居中)

例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table width="80" height="100" align="center" border="1" cellspacing="0" cellpadding="1">
    <caption>学生成绩表</caption>
       <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tfoot>
			<tr>
				<td>总和</td>
				<td>190</td>
			</tr>
        </tfoot>
        <tbody>
        <tr>
             <td>张三</td>
             <td>97</td>
        </tr>
        <tr>
             <td>李四</td>
             <td>93</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

代码运行结果：

3.<tr>和<td>

  • tr：定义表格的行。
  • td:定义表格单元。

3.1、align

定义表格行的内容对齐方式。

属性值：left(左对齐)、center(居中对齐)、right(右对齐)、justify(左右对齐)、char(不推荐)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table width="300" height="100" align="center" border="1" cellspacing="0">
    <caption>学生成绩表</caption>
       <thead>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tfoot>
			<tr>
				<td>总和</td>
				<td>190</td>
			</tr>
        </tfoot>
        <tbody>
        <tr align="center">
             <td>张三</td>
             <td>97</td>
        </tr>
        <tr>
             <td>李四</td>
             <td>93</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

代码运行结果：

注意观察第二行和第三行的区别，由于第二行设置了居中对齐，第三行没有设置(默认左对齐)

3.2、rowspan

规定单元格可横跨的行数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table width="300" height="100" align="center" border="1" cellspacing="0">
    <caption>关于rowspan的表</caption>
       
        <tbody>
        <tr>
             <td rowspan="2"></td>
             <td></td>
             <td></td>
        </tr>
        <tr>
             <td></td>
             <td rowspan="2"></td>
        </tr>
         <tr>
             <td></td>
             <td></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

代码运行结果：

3.3、colspan

规定单元格可横跨的列数。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style type="text/css">
		
	</style>
</head>
<body>
	<table width="300" height="100" align="center" border="1" cellspacing="0">
    <caption>关于colspan的表</caption>
       
        <tbody>
        <tr>
             <td colspan="2"></td>
             <td></td>
        </tr>
        <tr>
             <td></td>
             <td></td>
             <td></td>
        </tr>
         <tr>
             <td></td>
             <td colspan="2"></td>
        </tr>
        </tbody>
    </table>
</body>
</html>

代码运行结果：

注意区分例子3.2与3.3的不同

 

 

练习

工商银行汇款单

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业1</title>
</head>
<body>
	<h1>工商银行电子汇款单</h1>
	<table border="1" cellspacing="0">
	<thead>
		<tr>
				<th width="100" colspan="2">回单类型</th>
				<th width="500">网上转账</th>
				<th width="100" colspan="2">指令序号</th>
				<th width="500">213254135454</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="4" width="30">收款人</td>
			<td width="70">户名</td>
			<td width="500">张三</td>
			<td rowspan="4" width="30">付款人</td>
			<td width="70">户名</td>
			<td width="500">老刘</td>
		</tr>
		<tr>
			<td width="70">卡号</td>
			<td width="500">0000000001</td>
			<td width="70">卡号</td>
			<td width="500">0000000002</td>
		</tr>
		<tr>
			<td width="70">地区</td>
			<td width="500">南京</td>
			<td width="70">地区</td>
			<td width="500">杭州</td>
		</tr>
		<tr>
			<td width="70">网点</td>
			<td width="500">工商江苏南京业务处理中心</td>
			<td width="70">网点</td>
			<td width="500">江苏徐州业务中心</td>
		</tr>
		<tr>
			<td colspan="2" width="100">币种</td>
			<td width="500">人民币</td>
			<td colspan="2" width="50">钞汇标志</td>
			<td width="500">钞票</td>
		</tr>
		<tr>
			<td colspan="2" width="100">金额</td>
			<td width="500">1.00元</td>
			<td colspan="2" width="50">手续费</td>
			<td width="500">0.75元</td>
		</tr>
		<tr>
			<td colspan="2" width="100">合计</td>
			<td width="1100" colspan="4">人民币(大写):壹</td>
		</tr>
		<tr>
			<td colspan="2" width="100">交易时间</td>
			<td width="500">2017年6月01号</td>
			<td colspan="2" width="100">时间截止</td>
			<td width="500">2017-06-01-13:00.00.00000</td>
		</tr>
	</tbody>
	</table>
	<p>票据打印时间：2017-06-01 15：00：12</p>
	<p><del>票据打印单位：江苏徐州业务中心</del></p>
	<p>操作员：大营</p>
</body>
</html>

 

通过这个例子，我们对table表格里的内容有了进一步的了解，今天就到这里吧，掰掰

 

 

 

 

@牛二
关注
  • 9
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaWeb——HTML基础标签table标签与form标签的学习与理解
01-08
使用表格标签制作规整的表格 table标签是表格标签， border属性设置表格的边框厚度， width属性设置表格的宽度， align设置表格的对齐方式， cellspacing设置单元格的间距 tr是行标签， td是单元格标签， th是字体居中加粗的单元格标签, b是字体加粗标签 下面制作一个3*3的表格，放置在页面中心，边框厚度为2，宽度为500，单元格内没有间距，并每一行使用不同的效果 规整的表格 1.1 1.2 1.3 2.1 2.2 2.3 3.1 3.2 3.3 截图 密码： 性别：男 女 技能：Java
浅谈html table 标签
09-28
总的来说，table是个复杂的东西，关于它的主题也很多。我想简单的复习一下table。
table标签的结构与合并单元格的实现方法
10-27
以下是对table标签的结构与合并单元格的实现方法进行了详细的分析介绍，需要的朋友可以过来参考下
HTML中table标签的总结
12-06
总结了table一些应用在不同浏览器显示效果的问题
Table 标签详解
热门推荐
_
02-11 3万+
<table>在HTML 中定义了表格布局。说到 table 标签，我们可以想到的大致有以下几个元素：<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>接下来，我们看看每个元素有什么用，使用后会有怎样的效果。 table 的基本使用 1.<table> <!DOCTYPE html> <html><head><meta charset=".
详述table标签
飞翔的企鹅的博客
09-24 3181
HTML中的表格 我们常常会使用到Excle表格，可以非常直观的 建立、操作、删除表格数据（如下图）。 那么如何在html文件中创建一个表格呢？ HTML表格由table标签以及一个或多个tr、th或td标签组成： table标签用来定义表格，整个表格包含在<table>和</table>标签中 tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多...
web第十课：table表格标签
YY的博客
08-24 3498
table表格标签及它的属性
HTML table、form表单标签的介绍
不定时分享最优质的网络技术与教程，满满的干货。
09-11 413
本篇主要介绍 table、form标签以及表单提交方式。目录1. 标签：在HTML 中定义表格布局。2. 标签：用于创建 HTML 表单。3. 表单提交方式：介绍get、post方法。
html中table标签用法
chengxuzx的博客
05-29 1万+
1.<table> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>biaoge</title> </head> <body> <table border="1" cellpadding="0" cellspacing="8"> <tr> ...
HTML 中的Table标签
AI_dkx的博客
06-30 3496
Table标签如何使用，Table页面布局，Table属性介绍
表格常用标签及属性
weixin_60988128的博客
03-28 2326
网站首页下方的网站导航通常可以使用自定义列表来实现自定义列表的基本语法：
css中table标签详解(一)
weixin_45581836的博客
11-27 1万+
css中table标签详解(一) 什么是table标签，以及table标签的组成？ 不叨叨，直接上代码 <table> <tr> <td></td> </tr> </table> 我们可以看到table标签的组成是由table tr td 构成的. 其中...
table表格基础知识及简单运用
weixin_43183219的博客
12-16 1万+
了解table的基础知识，制作简单的table表格
HTML基础知识二
qq_57204280的博客
01-21 435
第二份笔记
HTML基础————table标签
憨憨的博客
05-07 1万+
html——table
table标签总结
weixin_30500105的博客
03-03 195
一、table标签：定义一个表格简单表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签） <table border=1><tr><th>表头1</th><th>表头2</th></tr><tr><td>内容1</td><td&...
表格（table属性、th/td属性、单元格合并）
weixin_69474097的博客
07-21 3291
表格（table属性、th/td属性、单元格合并）
html中table标签及属性
m0_45272038的博客
07-07 5786
table表格 HTML表格由table标签以及多个tr、th和td标签组成 table表示表格，整个表格要包含在<table></table>标签中 tr表示表格中的行，是单元格的容器，一行可以包括多个单元格 th表示表格中的单元格，我理解为列,th放在tr内表示这一行为标题行，其中的字体会默认粗体居中显示 td表示表格中的单元格，我理解为列，td也要放在tr内，可以理解为内容行 tfoot表示表格最后一行 <table>是<tr的上层标签 <tr>
好看的table标签
最新发布
09-12
首先，table标签可以让网页呈现出整齐美观的布局。通过使用table标签，可以将数据按照行和列的方式排列，使得网页结构清晰有序。同时，我们还可以为表格设置样式，比如调整边框颜色、背景色、字体大小等，从而让表格...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值