HMTL 基本结构标签 (下)

  • A+
所属分类:Web前端
摘要

1. 表格标签 1.1 表格的主要作用表格主要用于显示、展示数据 。1.2 表格的基本语法

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据

1.2 表格的基本语法

<table>   <tr>   	<td>单元格内的文字<td>   </tr> </table>

<table> </table> 是用于定义表格的标签。

<tr> </tr> 用于定义表格的,必须嵌套在 <table> </table>标签中。

<td> </td> 用于定义表格中的单元格,必须嵌套在 <tr></tr> 标签中。td 指表格数据 table data

	<table> 		<tr> 			<td>姓名</td> 			<td>性别</td> 			<td>年龄</td> 		</tr> 		<tr> 			<td>张三</td> 			<td>男</td> 			<td>18</td> 		</tr> 		<tr> 			<td>李四</td> 			<td>女</td> 			<td>28</td> 		</tr> 	</table>

HMTL 基本结构标签 (下)

1.3 表头单元格标签

<th> 标签表示 HTML 表格的表头部分,表头单元格的内容加粗居中。th 是 table head的缩写

	<table> 		<tr> 			<th>姓名</th> 			<th>性别</th> 			<th>年龄</th> 		</tr> 		<tr> 			<td>张三张三</td> 			<td>男</td> 			<td>1888888</td> 		</tr> 		<tr> 			<td>李四</td> 			<td>女</td> 			<td>28</td> 		</tr> 	</table>

HMTL 基本结构标签 (下)

 

1.4 表格属性

属性名 属性值 描述
align left、center、right 表格相对周围元素的对齐方式
border 1 或 "" 表格是否有边框,默认为"",表示没有边框 
cellpadding 像素值 单元边沿与其内容之间的空白,默认1像素【单元格填充】
cellspacing 像素值 单元格之间的空白,默认2像素【单元格间距】
width/height 像素值或百分比 表格的宽度/高度

 

	<table align="center" border="1">

HMTL 基本结构标签 (下)--> 位于浏览器中部,单元格都有边框

 

<table align="center" border="1" cellpadding="10" cellspacing="0">

HMTL 基本结构标签 (下)-->内边距为10px,将空隙设置为0

 

	<table align="center" border="1" cellpadding="10" cellspacing="0" width="400" height="200">

HMTL 基本结构标签 (下)-->宽度为400px,高度为200px

 

练习案例:小说排行榜

HMTL 基本结构标签 (下)

点击查看代码
	<table align="center" border="1" cellpadding="5" cellspacing="0"> 		<tr> 			<th>排名</th> 			<th>关键词</th> 			<th>趋势</th> 			<th>今日搜索</th> 			<th>最近七日</th> 			<th>相关链接</th> 		</tr> 		<tr> 			<td>1</td> 			<td>鬼畜灯</td> 			<td>↓</td> 			<td>345</td> 			<td>123</td> 			<td><a href="#">贴吧</a>&nbsp;<a href="#">百科</a></td> 		</tr> 		<tr> 			<td>2</td> 			<td>盗暮笔记</td> 			<td>↓</td> 			<td>245</td> 			<td>123</td> 			<td><a href="#">贴吧</a>&nbsp;<a href="#">百科</a></td> 		</tr> 		<tr> 			<td>3</td> 			<td>西游记</td> 			<td>↑</td> 			<td>1245</td> 			<td>14423</td> 			<td><a href="#">贴吧</a>&nbsp;<a href="#">百科</a></td> 		</tr> 	</table>

 

1.5 表格结构标签

因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部 和 表格主体 两大部分:

<thead>标签 表格的头部区域<tbody>标签 表格的主体区域。这样可以更好的分清楚表格结构。

	<table align="center" border="1" cellpadding="10" cellspacing="0"> 		<thead> 			<tr> 				<th>姓名</th> 				<th>性别</th> 				<th>年龄</th> 			</tr> 		</thead> 		 		<tbody> 			<tr> 				<td>张三张三</td> 				<td>男</td> 				<td>1888888</td> 			</tr> 			<tr> 				<td>李四</td> 				<td>女</td> 				<td>28</td> 			</tr> 		</tbody> 	</table>

 

1.6 合并单元格

特殊情况下,可以把多个单元格合并为一个单元格。

合并单元格两种方式:

 (1) 跨行合并:rowspan = "合并单元格的个数"

 (2) 跨列合并:colspan = "合并单元格的个数"

	<table align="center" border="1" cellpadding="10" cellspacing="0"> 		<thead> 			<tr> 				<th colspan="5">个人简历</th> 			</tr> 		</thead>  		<tbody> 			<tr> 				<td>姓名</td> 				<td width="20"></td> 				<td>性别</td> 				<td width="20"></td> 				<td rowspan="2">照片</td> 			</tr> 			<tr> 				<td>年龄</td> 				<td></td> 				<td>出生日期</td> 				<td></td> 			</tr> 		</tbody> 	</table>

HMTL 基本结构标签 (下)