我教女朋友学编程html系列(5) html中table的用法和例子
女朋友不是学计算机的,但是现在从事计算机行业,做技术支持,她想学习编程,因此我打算每天教她一点点,日积月累,带她学习编程,如果其他初学者感兴趣,可以跟着学。
为了将table介绍的简单、生动,具有实战性,我花了3个半小时,写了5个列子,把table的一些重点知识讲了一下,直接看代码吧,一边看一边跟着敲,多动手练习。
1,边框不重叠的3行3列表格
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
,边框不重叠的3行3列表格
<table border="" >
<tr>
<td>学号</td> <td>姓名</td> <td>性别</td>
</tr>
<tr>
<td></td> <td>小强</td> <td>男</td>
</tr>
<tr>
<td></td> <td>小芳</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)table标签代表“表格”,border是它的属性,“边框”的意思,这里设置边框1像素(1px)。
(2)tr标签代表“行”,每个表格table都是由多行(tr)组成的
(3)td标签代表“单元格”,每行(tr)都包括多个单元格(td)。
(4)表格的每个单元格都有边框,默认是不显示边框的;当给table设置了border="1"之后,就会显示边框,但是边框不重叠。
(5)边框不重叠是不是很丑?你知道怎么让边框重叠吗?往下看。
2,合并边框的3行3列表格
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
,合并边框的3行3列表格
<table border="" style=" border-collapse:collapse;" >
<tr>
<td>学号</td> <td>姓名</td> <td>性别</td>
</tr>
<tr>
<td></td> <td>小强</td> <td>男</td>
</tr>
<tr>
<td></td> <td>小芳</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)合并表格的边框,需要给table添加样式;样式就是样子、外貌、长相,可以通过style=""来给
任何html标签添加样式,双引号内部采用“属性名称:属性值;”的形式,注意“属性名称”和“属性值”
中间是冒号,不是等号,属性值后面是分号。
(2)属性名称border-collapse的意思是“边框折叠方式”,border是边框的意思,collapse是“折叠”的意思,border-collapse对应的值有3个:separate(边框分开),collapse(边框折叠),inherit(从父元素继承border-collapse的值)。
border-collapse默认值为separate,因此,如果需要边框折叠,就需要设置border-collapse:collapse。
(3)表格没有标题,内容很挤,不美观,往下看吧。
3,带有标题、设置了宽度的表格
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
<table border="" style=" border-collapse:collapse;width:80%;" >
<caption align="top">学生信息表</caption>
<tr>
<td style="width:30%;">学号</td> <td style="width:60%;">姓名</td> <td style="width:10%;">性别</td>
</tr>
<tr>
<td ></td> <td >小强</td> <td>男</td>
</tr>
<tr>
<td></td> <td>小芳</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)caption标签是表格的标题标签,caption 标签必须紧随 table 标签之后。且每个表格只能定义一个标题。默认标题会显示在表格上方中间,可以使用align属性来
设置标题位置,值有top(顶部),bottom(底部),left(左边),right(右边)。
(2)width:80%;设置了table的宽度为80%,指的是table占父元素(此处是body标签)的百分比。另外,
分别给“学号”、“姓名”、“性别”这3列的宽度设置为30%、60%、10%,指的是td占tr的百分比,而tr
代表一行,又默认宽度为table的宽度。
(3)对于表格,只需要设置第一行各个单元格的宽度就行了,其他行的单元格会继承相同列单元格的宽度,我实验了一下,如果第二行第一列设置为70%,那么所有的第一列都占了70%的宽度,因此,
建议只设置第一行单元格的宽度,而不是所有单元格都设置宽度,不要把自己都搞晕了。
(4)你知道怎么让一个单元格跨多列吗?且让内容居中?表格固定像素宽度?请往下看。
4,用跨列td填充标题,表格固定宽度,单元格居中显示
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
,用跨列td填充标题,表格固定宽度,单元格居中显示
<table border="" style=" border-collapse:collapse; width:300px; " >
<tr>
<td colspan="" align="center" >学生信息表</td>
</tr>
<tr>
<td style="width:50px;">姓名</td> <td style="width:200px;">经典</td> <td style="width:50px;">性别</td>
</tr>
<tr>
<td >小强</td><td >
小强你怎么样了小强,小强你不要死啊。我们同甘共苦了那么多年,一直对你供书教学,想不到现在白头人送黑头人。你死了我怎么办啊小强。你醒醒啊,小强!
</td> <td>男</td>
</tr>
<tr>
<td>凤姐</td>
<td>
以我的智商和以我的能力的话,往前推三百年,往后推三百年,总共六百年之内不会有第二个人超过我。
</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)固定宽度直接使用像素表示,比如table的宽度设置为300像素,width:300px;
(2)colspan="3"说明了一个单元格跨3列,col是列的意思,span是平铺的意思,组合就是"平铺3列";如果跨3行,用rowspan="3",row是行的意思,组合就是“平铺3行”,也就是“跨3行”。
(3)单元格有个属性align,代表内容靠哪边的意思,它的值有left(靠左),right(靠右),center(居中),align="center"就是让内容“居中”的意思,因此标题就居中了。默认的是靠左,因此,其他单元格的内容都靠左。
(4)坚持一下,最后给你讲讲表格的“固定表格布局”和“自动表格布局”。
5,“固定表格布局”和“自动表格布局”
<html>
<head>
<title>
html中table的用法和例子
</title>
</head>
<body>
,“固定表格布局”和“自动表格布局”
<table border="" style=" border-collapse:collapse; table-layout:fixed; width:300px;" >
<tr>
<td colspan="" align="center" >学生信息表</td>
</tr>
<tr>
<td style="width:50px;">姓名</td> <td style="width:200px;">经典</td> <td style="width:50px;">性别</td>
</tr>
<tr>
<td >小强</td><td >
小强你怎么样了小强,小强你不要死啊。我们同甘共苦了那么多年,一直对你供书教学,想不到现在白头人送黑头人。你死了我怎么办啊小强。你醒醒啊,小强!
</td> <td>男</td>
</tr>
<tr>
<td>凤姐</td>
<td>
以我的智商和以我的能力的话,往前推三百年,往后推三百年,总共六百年之内不会有第二个人超过我。
</td> <td>女 </td>
</tr>
</table>
</body>
</html>
(1)table多了一个样式table-layout:fixed;意思是设置表格布局算法为“固定表格布局”。当设置了fixed时,列宽由表格宽度和列宽度设定,“固定”的意思就是宽度固定不变,有时设置了表格单元格的宽度,但是不起作用(可以在IE6、IE7、IE8上测试一下),就需要增加样式table-layout:fixed;
我在IE10和猎豹浏览器上测试了1个小时,结果是加上了table-layout:fixed;导致宽度不起作用了,但是,我在公司使用IE8测试程序时,不加table-layout:fixed会导致宽度不起作用,因此,不同浏览器对table-layout的解析是不同的。
(2)table-layout还有另外一个值,automatic,对应“自动表格布局”,也是默认值,列的宽度是由列单元格中没有折行的最宽的内容设定的,也就是单元格宽度和最长一行的内容一致,单元格宽度不是固定的,需要动态计算。
(3)一般情况下,是需要用“固定表格布局”的,设置好表格和单元格的宽度,防止表格因为内容的不同而变形。
在浏览器中查看,效果图我截了2张,如下:
效果图2:
我教女朋友学编程html系列(5) html中table的用法和例子的更多相关文章
- 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子
昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...
- 我教女朋友学编程Html系列(6)—Html常用表单控件
做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...
- 教女朋友学Python运行环境搭建
下班比较早,吃了饭没什么事,就和女朋友一起研究了Python. 编程语言有很多,为什么选择它呢?因为它火吧,没什么好解释的,下面开始第一步,环境搭建.网上的教程实在太多,各种系统的各种版本,本地链接下 ...
- 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset
我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...
- [Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念
上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义 下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...
- [Python] 文科生零基础学编程系列三——数据运算符的基本类别
上一篇:[Python] 文科生零基础学编程系列二--数据类型.变量.常量的基础概念 下一篇: ※ 程序的执行过程,就是对数据进行运算的过程. 不同的数据类型,可以进行不同的运算, 按照数据运算类型的 ...
- 学废了系列 - WebGIS vs WebGL图形编程
目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积 ...
- Asky极简教程:零基础1小时学编程,已更新前8节
Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...
- 少儿编程|Scratch编程教程系列合集,总有一款适合你
如果觉得资源不错,友情转发,贵在分享!!! 少儿编程Scratch: 少儿编程Scratch第一讲:Scratch完美的初体验少儿编程Scratch第二讲:奇妙的接球小游戏少儿编程Scratch第三讲 ...
随机推荐
- 著名的二分查找的BUG
int binarySearch(int a[], int key, int length) { int low = 0; int high = length - 1; while (low < ...
- MySql安装方法和配置、解决中文乱码
MySql Server安装步骤 1安装MySql Server 2 安装MySqlServer管理工具 解压中文语言包,将文件复制到安装目录下覆盖 文件覆盖后,打开软件设置语言为中文(CN) 3 M ...
- linux安装ftp服务器
Ftp(文件传输协议) 概念 FTP是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用 ...
- iOS自动布局一
Align: Pin:
- 调用WCF Data Service的几点Tips
使用Linq实现sql in statement的时候,用EF的时候可以通过Contains.Exists的方法实现.但是在使用WCF Data Service的context的时候,会报不支持该方法 ...
- kettle的hello world
本篇介绍使用kettle的一个最简单的例子,可以初步了解下转换. 需求是这样的: 存在一个本地csv文件,文件的内容如下 现在需要将csv中的数据保存到本地的文本文件中 1.创建一个转换,并且重命名 ...
- scala学习笔记1
一.REPL scala解释器读到一个表达式,对它进行求值,将它的打印出来,接着再继续读下一个表达式.这个过程被称作 读取-打印-循环,即REPL. 从技术上讲,scala程序并不是一个解释器.实际发 ...
- IntelliJ IDEA 13破解(JRebel 5.6.3a破解)
首先安装IntelliJ 13,记得要下载Ultimate Edition版本,不然就不需要破解了.. 安装到本地,然后进行一些配置(这一步可以不要,但是考虑到以后换系统可以省事,推荐做) 打开{in ...
- cxGrid使用汇总(一)
1. 去掉cxGrid中台头的Box 解决:在tableview1的ptionsview的groupbybox=false; 2.统计功能 解决:(1) tableview 1. tableview1 ...
- python datetime date time详解
之前一直被datetime,date,time弄的有点乱,可能是因为看文档每太看明白,找到了两篇文章供大家阅读都是转载的,其中有些名词这里解释一下: 世界协调时间(Universal Time Coo ...