我教女朋友学编程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 ...