菜单 搜索
首页 前端知识 网页制作05-html,css,javascript初认识のhtml表格的创建

网页制作05-html,css,javascript初认识のhtml表格的创建

2025-02-24 13:02:31 前端知识 前端哥 759 423 我要收藏

一、创建表格

1、表格的基本构成： Table， Tr,td

1）简介：

表格是由行列和单元格三部分组成的，一般通过三个标记来创建：

Table，表格标记

Tr,行标记

td，单元格标记

2）语法：

<table>
    <tr><!--第1行-->
        <td> 单元格文字</td><!--第1列-->
        <td>  单元格文字</td><!--第2列--></tr>

 <tr><!--第2行-->
        <td> 单元格文字</td><!--第1列-->
        <td>  单元格文字</td><!--第2列--></tr>

</table>

3）实例：简单的课表

<table>课表
	<tr><!--第1行-->
		<td> \</td><!--第1列-->
		<td>  Monday</td><!--第2列-->
		<td>  Tuesday</td><!--第3列-->
		<td>  Wednesday</td>
		<td>  Thursday</td>
		<td>  Friday</td>
		<td>  Saturday</td>
		<td>  Sunday</td>
		</tr>
	<tr><td>第1节</td></tr>
	<tr><td>第2节</td></tr>
	<tr><td>第3节</td></tr>
	<tr><td>第4节</td></tr>
	<tr><td>第5节</td></tr>
	<tr><td>第6节</td></tr>
	</table>
复制

4）结果演示： 

2、设置表格的标题caption

TIPS:使用caption标记表格标题的好处是，标题定义包含在表格内，表格移动会同时移动

<caption>表格标题</caption>

<table>
	<caption>课程表</caption>
	<tr><!--第1行-->
		<td> \</td><!--第1列-->
		<td>  Monday</td><!--第2列-->
		<td>  Tuesday</td><!--第3列-->
		<td>  Wednesday</td>
		<td>  Thursday</td>
		<td>  Friday</td>
		<td>  Saturday</td>
		<td>  Sunday</td>
		</tr>
	<tr><td>第1节</td></tr>
	<tr><td>第2节</td></tr>
	<tr><td>第3节</td></tr>
	<tr><td>第4节</td></tr>
	<tr><td>第5节</td></tr>
	<tr><td>第6节</td></tr>
	</table>
复制

3、表头th

1）简介：表头TH是TD单元格的一种变体,实质上仍是一种单元格,它一般位于第1行和第一列用来表明这一行或列的内容类别.一般情况下浏览器会以粗体和居中的样式显示th元素中的内容

2）语法：

<th>表头的内容</th>

3）实例：简单的课表

	<table>
	<caption>课程表</caption>
	<tr><!--第1行-->
		<th> \</th><!--第1列-->
		<td>  Monday</td><!--第2列-->
		<td>  Tuesday</td><!--第3列-->
		<td>  Wednesday</td>
		<td>  Thursday</td>
		<td>  Friday</td>
		<td>  Saturday</td>
		<td>  Sunday</td>
		</tr>
	<tr><th>第1节</th></tr>
	<tr><th>第2节</th></tr>
	<tr><th>第3节</th></tr>
	<tr><th>第4节</th></tr>
	<tr><th>第5节</th></tr>
	<tr><th>第6节</th></tr>
	</table>
复制

4）结果演示：

二、表格的基本属性

1、表格宽度 Width

<table width="表格的宽度">

2、表格高度 Height

<table height="表格的高度">

3、表格对齐方式align

<table align="对齐方式"> 
<table width="500" height="130" align="center">
复制

三、表格的边框

1、表格边框宽度 Border

 Border属性设置的边框只能影响表格四周的边框宽度，一般设置不应超过五像素，否则会影响整体美观

<table border="边框宽度">

<table width="600" height="130" align="center" border="5">
复制

 

2、表格边框颜色bordercolor

  Tips:边框颜色默认为灰色,边框的宽度不能为零否则无法显示颜色

<table border="5" bordercolor="#F5B906">

<table width="600" height="130" align="center" border="5" bordercolor="#F5B906">
复制

 

3、内框宽度cellspacing

<table cellspacing="内框宽度值">

4、表格内文字与边框间距 Cellpadding

<table cellpadding="表格内文字与边框间距">

	<table width="750" height="130" align="center" border="1" bordercolor="#F5B906" cellspacing="5" cellpadding="10">
复制

四、表格背景

1、表格背景颜色bgcolor

<table bgcolor="背景颜色">

 

2、表格背景图像

这里用绝对路径或者相对路径都可以

<table background="背景图像地址">

 

五、表格的行属性

1、高度控制height

<tr height="行的高度">

2、边框颜色bordercolor

<tr border color="行的边框颜色"

3、行背景bgcolor, Background

<tr bgcolor="行的颜色">

<tr background="背景图像的路径">

4、行文字的水平对齐方式align

<tr align="对齐方式"

5、行文字的垂直对齐方式valign

<tr valign="对齐方式">

“表格行属性整体演示代码” 

<table width="750" 
		   height="130" 
		   align="center" 
		   border="5" 
		   bordercolor="#F5B906" 
		   cellspacing="5"
		   cellpadding="10"  
		   background="02.png">
<!--width:表格总宽度, 
Height:表格总高度,
Align:表格的排列方式;
border:表格外边框; 
Border color:表格边框颜色; 
Sellspacing:内框宽度; 
cellpadding:表格内文字与边框间距-->
	<caption>课程表</caption>
	<tr height="60" bordercolor="##000000" bgcolor="#BA0535" align="center" valign="top"><!--第1行-->
		<th width="46"> \</th><!--第1列-->
		<td width="51">  Monday</td><!--第2列-->
		<td width="55">  Tuesday</td><!--第3列-->
		<td width="76">  Wednesday</td>
		<td width="60">  Thursday</td>
		<td width="44">  Friday</td>
		<td width="57">  Saturday</td>
		<td width="51">  Sunday</td>
		</tr>
	<tr background="01.jpg"><th>第1节</th><td>语文</td></tr>
	<tr><th>第2节</th></tr>
	<tr><th>第3节</th></tr>
	<tr><th>第4节</th></tr>
	<tr><th>第5节</th></tr>
	<tr><th>第6节</th></tr>
	</table>
复制

 演示结果：

六、单元格属性

1、单元格大小 Width, Height

默认情况下单元格的宽度和高度会根据内容自动调整

<td height="高度" width="宽度">内容</td>

2、水平跨度 Colspan

<td colspan="跨度的列数" >内容</td>

3、垂直跨度 Rowspan

<td rowspan="跨度的行数" >内容</td>

4、对齐方式 Align,valign

<td align="对齐方式">

 <td valign="对齐方式">

5、单元格的背景色

<td bgcolor="颜色">

6、单元格的边框颜色Bordercolor

<td bordercolor="边框颜色">

7、单元格的亮边框Bordercolorlight

<td bordercolorlight="单元格边框向光部分的颜色">

8、单元格的暗边框Bordercolordark

<td bordercolordark="单元格边框背光部分的颜色">

9、单元格的背景图像 Background

<td background="图片路径">

单元格属性整体演示代码: 

<table border="5">
	<caption>商品销售清单</caption>
	<tr>
	<th height="30" width="40">序号</th>
	<th width="60">产品</th>
	<th width="60">成本</th>
	<th width="60">价格</th>
	<th width="130" bordercolor="#FC0105">垂直合并演示</th></tr>
	
	
	<tr>
	<th>1</th>
	<td bordercolorlight="#E91EDA">电视</td>
	<td>$3000</td>
	<td>$4000</td>
	<td rowspan="4" align="center" valign="bottom" bgcolor="#F1B5B6">这里是纵向合并</td>
	</tr>
	
	<tr>	
	<th>2</th>
	<td bordercolordark="#E91EDA">电脑</td>
	<td>$4000</td>
	<td>$5000</td></tr>
	
	<tr>	
	<th>3</th>
	<td>电话</td>
	<td>$5000</td>
	<td>$6000</td></tr>
	
	<tr>
	<th colspan="2" align="center" background="01.jpg">合计</th>
	<td>$1200</td>
	<td>$1500</td></tr>
	</table>
复制

 演示结果：

 

七、表格的结构

下面会通过每日饮品特价表，来展示表首，表主体和表尾的使用，效果如下：

1、表格的标首标记<thead>

1）简介：表首样式的开始是<thead>结束</thead>他们用于定义表最上端表首的样式，可以设置背景颜色，文字对齐方式文字的垂直对齐方式等

<thead bgcolor="背景颜色" align="文字水平对齐方式" valign="文字垂直对齐方式" >

……

</thead>

2、表格的表主体标记<tbody>

1）简介：表主体样式用于统一设计表主体部分的样式

<tbody bgcolor="背景颜色" align="文字水平对齐方式" valign="文字垂直对齐方式" >

……

</tbody>

3、表格的表尾标记<tfoot>

1）简介：表尾标记用于定义表尾样式

<tfoot bgcolor="背景颜色" align="文字水平对齐方式" valign="文字垂直对齐方式" >

……

</tfoot>

《每日饮品特价》演示代码： 

<table border="5">
	<caption>每日饮品特价</caption>
	<thead bgcolor="#D691F3" align="center" valign="middle" >
	<tr><th >时间</th><th width="96">特价饮品</th></tr></thead>
	<tbody bgcolor="#F5D7F2" align="center">
	<tr><td> Monday</td><td>咖啡</td></tr>
	<tr><td>  Tuesday</td><td>奶茶</td></tr>
	<tr><td>   Wednesday</td><td>柠檬红茶</td></tr>
	<tr><td>  Thursday</td><td>柠檬绿茶</td></tr>
	<tr><td>  Friday</td><td>橙汁</td></tr>
	<tr><td>  Saturday</td><td>百香果蜜</td></tr>
	</tbody>
	<tfoot bgcolor="#D691F3">
		<tr><td colspan="2"> 周日休息，welcome during weekdays</td></tr>
	</tfoot>
</table>	
复制

转载请注明出处或者链接地址：https://www.qianduange.cn//article/21244.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C/C | 每日一练 (2)

2025-02-24 13:02:49

Linux性能监控工具汇总

2025-02-24 13:02:48

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码 数据库 文档)

2025-02-24 13:02:48

DeepSeek 提示词：定义、作用、分类与设计原则

2025-02-24 13:02:48

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

2025-02-24 13:02:48

Python常见面试题的详解16

2025-02-24 13:02:48

Docker实战-使用docker compose搭建博客

2025-02-24 13:02:47

QQ登录测试用例报告

2025-02-24 13:02:47

乐享数科：供应链金融—三个不同阶段的融资模式

2025-02-24 13:02:47

【Deepseek】Linux 本地部署 Deepseek

2025-02-24 13:02:47

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
3

CSS常用属性（文本属性）

2024-11-04 09:11:111000
4

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
5

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
6

vue使用datav echarts

2024-09-06 00:09:381000
7

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
8

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
9

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
10

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！