表格基础知识与应用

最新推荐文章于 2023-05-31 16:19:35 发布
最新推荐文章于 2023-05-31 16:19:35 发布
阅读量591 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shmily____/article/details/80978662
版权

给大家分享一些关于表格的基础知识和一些简单的应用

先带大家了解一下表格的基础知识：

定义表格：<table>

  1. 表格标题：<caption>
  2. 表格表头：<thead>
  3. 表格正文：<tbody>
  4. 表格页脚：<tfoot>
  5. 表头单元格：<th>
  6. 表格行：<tr>
  7. 表格单元格：<td>

表格常用属性和专用样式：

  1. 表格对其方式：align（左中右）
  2. 表格边框宽度：border
  3. 表格边框颜色：bordercolor
  4. 表格背景色：bgcolor
  5. 表格背景图：background
  6. 单元间间隙：cellspacing
  7. 表格内边距：cellpadding
  8. 横向合并单元格（td属性）：colspan="2"
  9. 纵向合并单元格（td属性）：rowspan="2"
  10. 合并相邻单元格边框（table样式）：border-collapse:collapse;

然后我们来看一些简单的应用

下面是一个简单的表格的单元格的合并拆分的实现

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
table{border-collapse:collapse;}
td{width:100px; height:80px;}
</style>
</head>
<body>
<table bgcolor="#ffffce" cellpadding="0" cellspacing="0" border="1">
	<tbody>
    	<tr>
        	<td colspan="2"></td>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td rowspan="3"></td>
        </tr>
        <tr>
        	<td rowspan="2"></td>
            <td></td>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
</body>
</html>
效果图：

然后给大家一个稍微复杂一点的表格的应用：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
	table{width: 720px;background-color: #ffffff;margin: 0 auto;border-collapse:collapse}
	.t1{border-right: 30px solid #f2f2f2;border-left: 30px solid #f2f2f2;border-top: 30px solid #f2f2f2;}
	.t2{border-right: 30px solid #f2f2f2;border-left: 30px solid #f2f2f2;border-bottom: 30px solid #f2f2f2;}
	th{border:1px solid #e0e0e0;}
	#id1{margin-left: 37px;}
	select{border: 1px solid #abadb3;margin-left: 14px;margin-bottom: 15px;margin-top: 15px;} 
	input{margin-left: 35px;}
	.box{border-top: 1px solid #e0e0e0;}
	#id1{margin-left:185px;}
	.box div{float: left;width: 80px;text-align: center;line-height: 45px;}
	.tr1 td{height: 25px;border:1px solid #e7e7e7;background-color: #f7ffef;text-align: center;}
	tr td{height: 25px;border:1px solid #e7e7e7;text-align: center;}
	p,p b{color: #4ca100;}4
	#id4{border-bottom: 1px solid #e7e7e7;}
</style>
<body>
		<table class="t1"> 
		    	<form>
		    		<th>
		    	        出诊时间：
		    	        <select><option>--请选择--</option></select>
		    	        <select><option>--请选择--</option></select>
		    	        门诊类型：
		    	        <select><option>--请选择--</option></select>
		    	        <input type="submit" value="查询"/>
		    	        <div class="box clearfix">
		    		       <div id="id1"><img src="img/pic1.jpg">普通门诊</div>
		    		       <div><img src="img/pic2.jpg">专家门诊</div>
		    		       <div><img src="img/pic3.jpg">特需门诊</div>
		    		       <div><img src="img/pic4.jpg">夜间门诊</div>
		    	       </div>
		    	    </th>
		        </form>
		 </table>
		 <table class="t2">
		 	 <tr class="tr1">
		    	    	<td>医生姓名</td>
		    	    	<td>所在科室</td>
		    	    	<td>擅长</td>
		    	    	<td></td>
		    	    	<td>一</td>
		    	    	<td>二</td>
		    	    	<td>三</td>
		    	    	<td>四</td>
		    	    	<td>五</td>
		    	    	<td>六</td>
		    	    	<td>日</td>
		    	    	<td>联系医生</td>
		    	 </tr>
		    	 <tr>
		    	 	<td rowspan="3"><p><b>马文</b></p><br>副主任医师</td>
		    	 	<td rowspan="3">眼科</td>
		    	 	<td rowspan="3">视神经，视网膜脉络膜疾</td>
		    	 	<td><p>上</p></td>
		    	 	<td><img src="img/pic2.jpg"></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic2.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td rowspan="3"></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>下</p></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic2.jpg"></td>
		    	 	<td><img src="img/pic2.jpg"></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic2.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>晚</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr>
		    	 	<td rowspan="3"><p><b>刘运良</b></p><br>其他</td>
		    	 	<td rowspan="3">神经内科</td>
		    	 	<td rowspan="3">临床神经病学，脑神经</td>
		    	 	<td><p>上</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic2.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td rowspan="3"></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>下</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>晚</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	    <td></td>	
		    	 </tr>
		    	  <tr>
		    	 	<td rowspan="3"><p><b>蒋剑</b></p><br>主治医师</td>
		    	 	<td rowspan="3">眼科</td>
		    	 	<td rowspan="3"></td>
		    	 	<td><p>上</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td rowspan="3"></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>下</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>晚</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	  <tr>
		    	 	<td rowspan="3"><p><b>贺楚风</b></p><br>主治医师</td>
		    	 	<td rowspan="3">耳鼻咽喉科</td>
		    	 	<td rowspan="3"></td>
		    	 	<td><p>上</p></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td rowspan="3"></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>下</p></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>晚</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr>
		    	 	<td rowspan="3"><p><b>吕冰清</b></p><br>其他</td>
		    	 	<td rowspan="3">神经内科</td>
		    	 	<td rowspan="3">小儿神经病 弱智和脑瘫</td>
		    	 	<td><p>上</p></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td rowspan="3"></td>
		    	 </tr>
		    	 <tr>
		    	 	<td><p>下</p></td>
		    	 	<td></td>
		    	 	<td><img src="img/pic1.jpg"></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 </tr>
		    	 <tr id="id4">
		    	 	<td><p>晚</p></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>
		    	 	<td></td>    	 	
		    	 </tr>
</body>
		 </table>
</body>
</html>
效果图：

文件夹 CSS样式引入以及图片文件夹图：

Future_q
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表格基础知识-表格标签（一）
进击的前端小白
05-26 885
最近一直在做表格，所以准备把表格的相关知识总结下1.表格的结构&lt;table border="" cellspacing="" cellpadding=""&gt;    &lt;thead&gt;     &lt;tr&gt;      &lt;th&gt;Header&lt;/th&gt;     &lt;/tr&gt;    &lt;/
计算机应用基础知识概述.doc
11-30
计算机应用基础知识概述 计算机应用基础知识概述是计算机科学的基础知识，涵盖了计算机软件系统的构成、软件的概念、特点及分类、计算机的基本工作原理、程序设计语言、计算机指令、计算机程序等内容。本文将对...
表格标签
花&败
01-27 1569
1.简介 现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。 2.创建表格 table、tr、td，他们是创建表格的基本标签，缺一不可 table用于定义一个表格标签。 tr标签 用于定义表格中的行，必须嵌套在 table标签中。 td 用于定义表格中的单元格，必须嵌套在<tr...
表格的使用
szydqq的博客
03-06 448
表格的属性
HTML表格应用
weixin_34212762的博客
05-07 270
HTML表格表格标签表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐。tr: table rowth: table headtd: table data行、列、单元格 单元格特点：同行等高、同列等宽表格的基本语法：创建一个3行3列的表格：<table border="1px" width="300px"><tr><!--tr...
表格的基本结构及属性
weixin_46162015的博客
07-23 1074
1.表格 1）表格是什么：页面中用来显示数据。 2）课表/日历/成绩单/oa系统。 3）语法结构： 但是，如果没有加特殊的属性，每一行中的单元格数量必须一致。 4）表格的属性：加到table里面的，border设置边框，cellspacing边框与边框之间的距离【默认为1px】，width/height align【设置table的位置】，bgcolor【背景颜色】。 加到tr里面的：height=“200px” ，align="lef...
WORD的基础知识与基本操作PPT课件
05-17
### 基础知识与操作 #### 1. 启动与退出 - **启动**：可以通过Windows的“开始”菜单、桌面快捷方式、双击已有的Word文档或者新建Microsoft Word文档来启动。 - **退出**：可以点击Word主窗口右上角的关闭按钮，...
计算机应用基础知识点.docx
03-28
1. 计算机基础知识： - 计算机的发展过程：从第一代电子管计算机到现在的第五代智能计算机，技术不断进步，体积越来越小，计算能力显著增强。 - 分类：按照规模分为超级计算机、大型机、小型机、工作站、个人...
计算机基础与应用图片制作抠图处理ppt课件.pptx
11-19
计算机基础与应用图片制作抠图处理ppt课件是关于计算机基础知识和应用领域的课程教学资源，其中包括计算机硬件配置与应用、计算机操作系统配置与应用、计算机网络配置与应用等多个项目。该课程旨在培养学生的计算机...
专升本计算机应用基础.pdf
03-16
计算机应用基础是专升本考试中的一个重要科目，涵盖的内容广泛，包括计算机网络、操作系统、数据存储、...以上就是专升本计算机应用基础中涉及的一些核心知识点，掌握这些基础知识对于理解和操作计算机系统至关重要。
表格的相关知识
qq_59641085的博客
07-23 365
一、表格 1.表格的创建 2.表格的相关属性 宽度 width 高度 height 边框 border 边框颜色 bordercolor 背景颜色 bgcolor 文字水平对齐 align="left"或"right"或"center" 文字垂直对齐 valign="top"或"middle"或"bottom" 单元格与单元格之间的间距 cellspacing="单元格与单元格之间的间距",给table添加此属性 单.
表格(table)笔记-基础知识
m0_55879104的博客
04-25 676
表格的作用：   存在即是合理的。表格在现在还是一种较为常见的一种标签，但不是用来布局的。常见显示，表示表格式数据。    因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理虽然div布局也可以做到，但是总没有表格来得方便。 创建表格的基本的三对html标签：   一个完整的表格有表格标签(table)、行标签(tr)、单元格标签(td)组成，没有列的标签。   行标签tr中只能嵌套td类的单元格；   t
HTML表格基础知识
qq_42534317的博客
08-18 201
一、语法 注：一对tr表示一行;一对td表示一列(一个单元格) 二、数据表格的相关属性 1）width=”表格的宽度” 2）height=”表格的高度” 3）border=”表格的边框” 4）bordercolor=”边框色” 5）cellspacing=”单元格与单元格之间的间距” 6）cellpadding=”单元格...
电子表格计算机知识,EXCEL电子表格基本知识.doc
weixin_29585753的博客
06-24 1348
Excel电子表格Excel电子表格1，启动Excel(与Word应用程序在一起)2，界面组成a)标题栏、菜单栏、工具栏、状态栏(与Word的界面相同)b)名称框和编辑栏(这是EXCEL特有的)3，Excel的一些术语a)工作薄、工作表(工作薄好比是一本书，而工作表好比是书中一页纸，默认情况下，一个工作薄中默认包含三个工作表)b)单元格(Excel电子表格是由行和列构成的表格，行用数字1,2,3,...
表格一些知识点
幻影
03-23 492
1、colspan—  跨多列  2、窗口中正常情况下只能显示一个网页，采用帧可以将窗口分隔出多个窗口，每个窗口对应一个html文件 Frame --> --> HTML中target属性的4个内定名称 _blank，表示新开启一个浏览器窗口 _self，此属性为默认属性，在当前窗口显示 _parent，表示在当前窗口的直接父帧
【HTML】表格应用
qq_45677671的博客
03-31 231
文章目录一、表格属性二、合并行列三、属性补充（css）3.1、单元格间距3.2、合并相邻单元格边框3.3、无内容时单元格的设置：3.4、显示单元格行和列的算法（加快运行速度）3.5、设置表格标题的位置 一、表格属性 表格标签和属性 <table> 标签：定义表格 border="10"/10：设置表格边框厚度，可为number或string类型，0表示没有边框 <th> 标签：定义表格的表头 colspan=2：规定单元格可横跨的列数，为number类型 rowspan
Excel表基础操作
qq_66446328的博客
05-31 235
报表框架、指标梳理、联动筛选、条件求和、数据自动识别、迷你图、同环比计算、进度条、图标指示、突出显示、细节美化。—sumifs、match、index顶级用法：自动根据列名的数据和条件进行求和。—match、index：一起使用：自动根据列名查找数据。—表格组成：工作簿-工作表-行/列-单元格。—match：查找数值在区域中的位置。—index：根据区域的位置返回数值。—subtotal：根据筛选求和。—VLOOKUP：连接匹配数据。—sumifs：多条件求和。—sumf：单条件求和。
3 表格
一个超可爱的账号
10-30 195
表格table 表格是一种常用的标签，但不是用来布局，常用来 显示、展示表格式数据。 因为它可以让数据显示的非常的规整，可读性非常好。 特别是后台展示数据的时候表格运用是否熟练就显得很重要。一个清爽简约的表格能够吧繁杂的数据表现得很有调理，虽然div布局也可以做到，但是总没有表格来的方便。 创建表格 创建表格的基本语法： <table> <tr> <td>表格内的文字</td> <td>表格内的文字</td> <t
我的HTML学习------表格的基本使用
热门推荐
Y4tacker的博客
04-18 1万+
前言小知识：当我们需要连续打出多个相同标签时，也有快捷键 tr*4 然后按下 tab,很神奇吧，这对于我们创建n行n列的表格特别有帮助！！！ <tr></tr> <tr></tr> <tr></tr> <tr></tr> 表格表格的基本使用 表格的基本使用 创建表格的方法： <tabl...
vba应用基础与实例教程 pdf
最新发布
10-22
VBA应用基础与实例教程 PDF是一本介绍VBA编程语言基础知识并提供实际应用实例的教程。VBA是Visual Basic for Applications的缩写，是一种宏编程语言，在Microsoft Office套件中常用于自动化处理任务。 这本教程主要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值