前端开发HTML+CSS之网页表格(六)

    表格以行列的形式将数据罗列出来,结构紧凑,数据直观,当组织数据较多时,就需要用到表格
    表格在网页中有两个作用:
     一是布局网页内容
    二是组织相关的数据


一、表格概述

一个表格包含行,列和单元格三个组成部分

表格内容分为三个区域:表格页眉,表格主体,表格页脚
表格页眉:存放表头内容
表格主体:存放数据
表格页脚:存放一些注脚内容,汇总数据等

一些标签

标签 描述
table 定义表格
caption 定义表格标题
tr 定义表格的行
th 定义表格的表头
td 定义表格的单元格
thead 定义表格页眉
tbody 定义表格主体
tfoot 定义表格页脚

注意:
一个表格只能有一个thead和tfoot,可以有很多个tbody

下面介绍一下表格的结构

<table>
	<caption>表格标题caption>
	<thead>
		<tr>
			<th>表头1th> <th>表头2th> <th>表头3th> ...
		tr>
	thead>
	<tbody>
		<tr>
		<td>数据1td> <td>数据2td> <td>数据3td> ...
		tr>
		...
	tbody>
	
	...
	
	<tfoot>
		<td>数据1td> <td>数据2td> <td>数据3td> ...
		
	tfoot>
table>

二、表格标签

主要讲解一下各个标签的用法

  • table标签
    定义表格对象,同时可以使用标签属性设置表格的宽度,高度,边框宽度,对齐方式,背景颜色,单元格间距和边距样式
    但由于在HTML5中,以上属性都不支持,故我们使用下面的CSS格式化表格
  • tr标签
    生成表格中行的标签,一个tr标签对对应表格的一行
    在HTML5中,所有属性都不支持,故我们使用下面的CSS格式
  • td和th标签
    标准单元格用td标签对标识,内容默认为居中且以普通格式显示
    表头单元格用th标签对标识,内容默认居中加粗表示

注意:
标准单元格可以存放任何数据,包含文本,图片,列表,段落,表单,表格等内容

其一些基本属性只有colspan 和rowspan还可以使用,其它属性也不支持

属性及属性值 描述
colspan numbers 单元格可横跨的列数
rowspan numbers 单元格可横跨的行数
  • caption标签
    设置表格的标题
    在HTML5中,该标签所有属性都不支持,故我们使用下面的CSS格式
  • thead和tbody和tfoot标签
    这些标签对于这些表格进行分区
    thead表头分组
    tbody主体内容分组
    tfooot页脚分组

当长的表格被打印时,表头和页脚卑鄙打印在包含表格数据的每一张页面

  • colspan属性实现单元格跨列合并
    可出现在th和td标签中,指定所跨的列数,实现合并同一行的若干个单元格
    设置的语法为:
<td colspan="横跨列数">
<th colspan="横跨列数">
  • rowspan属性实现跨行操作
    可出现在th和td标签中,指定所跨的行数,实现合并同一列的若干个单元格
    设置的语法为:
<td colspan="横跨行数">
<th colspan="横跨行数">
  • 格式化表格

三、CSS表格属性

属性 属性值 描述
border-collase seperate 默认值,表格边框和单元格边框会分开
border-collase collapse 表格边框和单元格边框会合并成一个单一的边框
border-spacing length 规定相邻单元格的边框之间的距离,单位可取px/cm等
caption-side top 默认值,表格标题显示在表格上面
caption-side bottom 表格标题显示在表格下面
table-layout automatic 单元格宽度由单元格内容决定
table-layout fixed 单元格由表格宽度和单元格宽度决定

四、CSS格式化表格

即CSS表格属性虽然得到了期望的细边框,但是宽度,高度,单元格间距,表格的背景等都保持了默认的效果,默认效果也不太美观,故可以进行别的格式化

五、表格各元素display属性值

display属性可以设置标签作为一个盒子的类型,display属性取不同值,决定盒子具有不同类型

六、表格综合案例

  1. 分析给定的效果实现图,以获得表格结构
    分析表格为几行几列,哪些需要合并
  2. 根据分析得到的表格结构,使用表格标签搭建页面结构
    开始搭建几乘几的表格,利用colspan和rowspan实现合并
  3. 对搭建好的页面结构进行样式设置
    先判断样式是否满足,再对细节进行设置,直接在CSS模块内设置即可

在进行了上述的学习,我们可以做出有特色的表格了,大家可以多动手尝试一下
这是我做的一个关于天气预报的
贴上部分代码

前端开发HTML+CSS之网页表格(六)_第1张图片


<html>
<head>
	<meta charset="utf-8">
	<meta author="gaozhujun">
	<title>表格-天气预报title>
	<link rel="stylesheet" type="text/css" href="master9.css">
head>
<body>
	<div class="container">
		
		<div class="miao">
			<p>MIAOV.COMp>
		div>
		<div class="one">
			<ul>
				<li>
					<p class="i">BREEZEp>
					<p class="ii">Beijingp>
				li>
					
				<li>
					<p class="two">21℃p>
				li>
			ul>
		div>
		<div class="biaoge">
			<table>
				<tr>
					<th colspan="2" class="header">日期th>
					<th colspan="2" class="header">天气现象th>
					<th class="header">气温th>
					<th class="header">风向th>
					<th class="header">风力th>
				tr>
				<tr>
					<td rowspan="2" class="date">
						<p>23日星期六p> <p>7℃~30℃p>
					td>
					<td class="day">白天td>
					<td class="icon-d">
						<img src="太阳2.jpg" width="50" height="35">
					td>
					<td class="weather">td>
					<td class="tem">高温30℃td>
					<td class="wind">无持续风向td>
					<td class="wind">微风td>
				tr>
				<tr>
					<td class="night">夜间td>
					<td class="icon-n">
					<img src="多云2.jpg" width="50" height="35">
					td>
					<td>多云td>
					<td class="temdi">低温7℃td>
					<td class="wind">无持续风向td>
					<td class="wind">3级风td>
				tr>		
			table>
			div>
		div>
	div>	
body>
html>

该系列博客参考了聂常红 刘伟著的前端HTML+CSS修炼之道
第六篇HTML+CSS学习笔记到此结束 cheers! ?

你可能感兴趣的:(HTML+CSS)