Skip to content

Latest commit

 

History

History
214 lines (169 loc) · 4.93 KB

6.1表格.md

File metadata and controls

214 lines (169 loc) · 4.93 KB
Raw

一、创建表格

学会使用html的<table>标签在网页中插入表格

基本语法格式

<table>
  <tr>
    <td></td>
  </tr>
  tr标签定义行，td标签定义列
</table>

1.案例演示

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>

<body>
	<table border="4">
		<!--给表格添加边框-->
		<tr>
			<td>学生名称</td>
			<td>竞赛学科</td>
			<td>分数</td>
		</tr>
		<tr></tr>
			<td>赵欣</td>
			<td>数学</td>
			<td>100</td>
		<tr></tr>
			<td>小明</td>
			<td>英语</td>
			<td>28</td>
		<tr>
			<td>小花</td>
			<td>物理</td>
			<td>78</td>
		</tr>
	</table>
</body>
</html>

效果图片

二、table标签的属性

table标签有如下几种属性，具体用法如 <table border="4">

属性 描述 属性值
border 表格边框 像素值
width 表格宽度 像素值
height 表格高度 像素值
align 表格在网页中水平对齐方式 left、center、right
cellspacing 单元格与边框之间的空白间距 像素值（默认2像素）
cellpadding 单元格内容与单元格边框之间的空白距离 像素值（默认1像素）
bgcolor 背景颜色 #颜色值

还有背景颜色、背景图片等属性，略。

基本语法格式

<table border="4" cellspacing="20px" align="center" width="500px" bgcolor="#eee">

三、tr标签的属性

利用tr标签的属性可以为表格中的行设置不同的样式

属性 描述 常用属性值
height 行高 像素值
aligh 设置一行内容的水平对齐方式 left、center、right
valign 设置行内容的垂直对齐方式 top、middle、bottom
bgcolor 行的背景颜色 #颜色值
background 行背景图像 url（图像地址）

注意：如果table标签给出宽度，tr标签会自适应表格宽度，所以tr标签不能width属性

1.案例演示

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tr标签属性</title>
</head>

<body>
	<table border="2" width="500px" height="200px" align="center">
		<tr height="50px" align="center" valign="bottom" bgcolor="#CFA725">
			<td>姓名</td>
			<td>性别</td>
			<td>电话</td>
			<td>地址</td>
		</tr>
				<tr align="center">
			<td>小王</td>
			<td>男</td>
			<td>110</td>
			<td>北京</td>
		</tr>
				<tr align="center">
			<td>小李</td>
			<td>男</td>
			<td>120</td>
			<td>上海</td>
		</tr>
			<tr align="center">
			<td>amy</td>
			<td>女</td>
			<td>911</td>
			<td>美国</td>
		</tr>
	</table>
</body>
</html>

效果图片

四、td标签的属性

熟悉td标签的属性可以为表格中的单元格设置样式

属性名 含义 属性值
width 单元格宽度 像素值
height 单元格高度 像素值
colspan 单元格的水平方向合并 正整数
rowspan 单元格的竖直方向合并 正整数

注意：td标签的其它属性同tr标签，其他属性均可使用css样式替代，重点学习单元格的合并。

​ 此外，当某一个td单元格设置科宽度属性后，该列中的所有单元格都会以当前设置的宽度显示。

基本语法格式

		</tr>
				<tr align="center">
			<td bgcolor="#00FFFF" width="200px">小王</td>
			<td>男</td>
			<td>110</td>
			<td>北京</td>
		</tr>

1.案例演示

<html>
<head>
<meta charset="UTF-8">
<title>tr标签属性</title>
</head>

<body>
	<table border="2" width="500px" height="200px" align="center">
		<tr height="50px" align="center" valign="bottom" bgcolor="#CFA725">
			<td>姓名</td>
			<td>性别</td>
			<td>电话</td>
			<td>地址</td>
		</tr>
				<tr align="center">
			<td bgcolor="#00FFFF" width="200px">小王</td>
			<td>男</td>
			<td>110</td>
			<td rowspan="3">北京</td>
		</tr>
				<tr align="center">
			<td>小李</td>
			<td>男</td>
			<td>120</td>
		</tr>
			<tr align="center">
			<td>amy</td>
			<td>女</td>
			<td>911</td>
		</tr>
	</table>
</body>
</html>

效果图片

五、th标签的属性

​ <th></th>标签可以用来设置表头，默认为加粗居中显示

​ 使用方式和属性与td标签是一样的，把需要修改的表头的td标签更改为th即可。