HTML5教程

HTML表格

本文主要是介绍HTML表格，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

HTML表格


table:表格区域

tr标签：表格中的行

th标签:表格的表头

td标签：表格单元格

在开发工具HbuilderX中可以用table>tr* 行数 >td * 列数 可快速生成一个表格。

在每个标签内赋予属性，可达到一定的效果；

1.table:表格区域

border边框

width 宽

height 高

bgcolor 背景颜色

background 背景

cellpadding: 内容到边框的距离,
cellspacing: 单元格与单元格之间的距离,一般设置为"0";

align="center": 控制表格在本行中的水平位置。

caption 加入表格的标题。

cols 是 列数

rows 是 行数

2. tr:表格行

height 高

bgcolor 背景颜色

background 背景

align="center" 让本行所有单元格内容居中

valign 设置内容的垂直位置 。 有三个值 top （紧贴边框上部）； middle（居中）； bottom（紧贴边框底部）。

3.td单元格

width 宽

bgcolor背景颜色

background 背景

align="center"

valign 设置内容的垂直位置 top middle bottom

th:表头,也是单元格,内容加粗居中显示

colspan: 跨列

rowspan:跨行

练习
完成图片所给效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1"align="center"width="800"cellspacing="0">
			<caption>财务报表</caption>
			<tr align="center"valign="top">
				<td colspan="2">品&nbsp;&nbsp;牌</td>
				
				<td colspan="3">春&nbsp;&nbsp;装</td>
				
				
				<td colspan="3">夏&nbsp;&nbsp;装</td>
				
				
			</tr>
			<tr align="center"valign="top">
				<td colspan="2"></td>
				
				<td>男&nbsp;&nbsp;装</td>
				<td>女&nbsp;&nbsp;装</td>
				<td>童&nbsp;&nbsp;装</td>
				<td>男&nbsp;&nbsp;装</td>
				<td>女&nbsp;&nbsp;装</td>
				<td>童&nbsp;&nbsp;装</td>
			</tr>
			<tr align="center"valign="top">
				<td rowspan="2">JC</td>
				<td>牛仔系列</td>
				<td>110</td>
				<td>50</td>
				<td>228</td>
				<td>586</td>
				<td>255</td>
				<td>98</td>
			</tr>
			<tr align="center"valign="top">
				
				<td>休闲系列</td>
				<td>120</td>
				<td>500</td>
				<td>400</td>
				<td>198</td>
				<td>88</td>
				<td>50</td>
			</tr>
		</table>
	</body>
</html>

效果：
在这里插入图片描述

这篇关于HTML表格的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航