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

news/2025/2/23 0:16:27
htmledit_views">

一、创建表格

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）实例：简单的课表

html"><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>

html"><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）实例：简单的课表

html">	<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="对齐方式"> 
html"><table width="500" height="130" align="center">

三、表格的边框

1、表格边框宽度 Border

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

<table border="边框宽度">

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

 

2、表格边框颜色bordercolor

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

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

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

 

3、内框宽度cellspacing

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

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

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

html">	<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="对齐方式">

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

html"><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="图片路径">

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

html"><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>

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

html"><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>


http://www.niftyadmin.cn/n/5862863.html

相关文章

vue和微信小程序处理markdown格式数据

vue和微信小程序处理markdown格式数据

【1】Vue处理markdown数据 在Vue项目中展示Markdown格式的数据&#xff0c;比如通义千问模型返回的数据&#xff0c;你可以借助一些Markdown解析库将Markdown文本转换为HTML&#xff0c;然后在页面上渲染。以下为你详细介绍几种常用的实现方式。 方法一&#xff1a;使用marke…
阅读更多...
2025年能源会议要点

2025年能源会议要点

2025年全国能源工作会议于2024年12月15日在北京召开&#xff0c;这次会议是国家能源局在新的一年里对全国能源工作的规划与部署的重要会议。 会议特别强调了加快构建新型能源体系、推动能源高质量发展的重要性&#xff0c;并明确提出了2025年要初步建成全国统一电力市场的目标。…
阅读更多...
Docket Desktop 安装redis 并设置密码

Docket Desktop 安装redis 并设置密码

以下是在 Docker Desktop 中安装 Redis 并设置密码的详细步骤&#xff1a; 步骤 1&#xff1a;启动 Docker Desktop 确保你的 Docker Desktop 已经正确安装并且已经启动。你可以在任务栏或者系统托盘中找到 Docker 图标&#xff0c;确认其处于运行状态。 步骤 2&#xff1a;…
阅读更多...
【QT中的一些高级数据结构，持续更新中...】

【QT中的一些高级数据结构，持续更新中...】

QT中有一些很精妙、便捷的设计&#xff0c;在了解这些数据的同时&#xff0c;我们可以学到如何更好的设计代码。本贴持续更新中&#xff0c;欢迎关注和收藏 一 QScopedPointer主要特点&#xff1a;示例代码 二 Q_DISABLE_COPY 一 QScopedPointer QScopedPointer 是 Qt 中的一种…
阅读更多...
Html5学习教程，从入门到精通，HTML5 元素语法知识点及案例代码（2）

Html5学习教程，从入门到精通，HTML5 元素语法知识点及案例代码（2）

HTML5 元素语法知识点及案例代码 一、HTML5 元素概述 HTML5 元素是构成网页的基本单位&#xff0c;每个元素都有特定的语义和功能。HTML5 元素由开始标签、内容和结束标签组成&#xff0c;例如&#xff1a; <p>这是一个段落。</p><p> 是开始标签这是一个段…
阅读更多...
Flutter - 初体验

Flutter - 初体验

项目文件目录结构介绍 注&#xff1a;创建 Flutter 项目名称不要包含特殊字符&#xff0c;不要使用驼峰标识 // TODO 开发中运行一个 Flutter 三种启动方式 Run 冷启动从零开始启动Hot Reload 热重载执行 build 方法Hot Restart 热重启重新运行整个 APP 先看效果&#xff0c…
阅读更多...
ubuntu磁盘清理垃圾文件

ubuntu磁盘清理垃圾文件

大头文件排查 #先查看是否是内存满了&#xff0c;USER 很高即是满了 du -f#抓大头思想&#xff0c;优先删除大文件#查看文件目录 内存占用量并排序&#xff0c;不断文件递归下去 du --max-depth1 -h /home/ -h | sort du --max-depth1 -h /home/big/ -h | sort 缓存文件清理…
阅读更多...
纳米科技新突破：AbMole助力探索主动脉夹层的基因密码

纳米科技新突破：AbMole助力探索主动脉夹层的基因密码

近日&#xff0c;一项来自青岛大学附属医院转化医学研究所的研究&#xff0c;为我们揭示了利用AbMole产品助力探索主动脉夹层基因治疗的新路径。 研究背景&#xff1a;主动脉夹层的迷雾与挑战 主动脉夹层&#xff0c;作为一种危及生命的疾病&#xff0c;其发病率和死亡率均居…
阅读更多...
最新文章

Copyright @ 2022~2023