女朋友不是学计算机的，但是现在从事计算机行业，做技术支持，她想学习编程，因此我打算每天教她一点点，日积月累，带她学习编程，如果其他初学者感兴趣，可以跟着学。

　　为了将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的用法和例子的更多相关文章

  1. 我教女朋友学编程html系列(7)—Html无序列表、自定义列表、有序列表及常用例子

    昨天写的那篇文章<我教女朋友学编程Html系列(6)—Html常用表单控件>,基本上有1000人左右看了,那边文章是我站在前人的肩膀上修改来的,添加了截图和说明,合并了例子,使之更容易被初 ...

  2. 我教女朋友学编程Html系列(6)—Html常用表单控件

    做过网页的人都知道,html表单控件十分重要.基本上我们注册会员.登录用户,都需要填写用户名.密码,那些框框都是表单控件. 本来今天就想写一些常用的html表单控件,于是开始搜资料,找到了一个网页,作 ...

  3. 教女朋友学Python运行环境搭建

    下班比较早,吃了饭没什么事,就和女朋友一起研究了Python. 编程语言有很多,为什么选择它呢?因为它火吧,没什么好解释的,下面开始第一步,环境搭建.网上的教程实在太多,各种系统的各种版本,本地链接下 ...

  4. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  5. [Python] 文科生零基础学编程系列二——数据类型、变量、常量的基础概念

    上一篇:[Python] 文科生零基础学编程系列--对象.集合.属性.方法的基本定义 下一篇: (仍先以最简单的Excel的VBA为例,语法与Python不同,但概念和逻辑需要理解透彻) p.p1 { ...

  6. [Python] 文科生零基础学编程系列三——数据运算符的基本类别

    上一篇:[Python] 文科生零基础学编程系列二--数据类型.变量.常量的基础概念 下一篇: ※ 程序的执行过程,就是对数据进行运算的过程. 不同的数据类型,可以进行不同的运算, 按照数据运算类型的 ...

  7. 学废了系列 - WebGIS vs WebGL图形编程

    目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积 ...

  8. Asky极简教程：零基础1小时学编程，已更新前8节

    Asky极简架构 开源Asky极简架构.超轻量级.高并发.水平扩展.微服务架构 <Asky极简教程:零基础1小时学编程>开源教程 零基础入门,从零开始全程演示,如何开发一个大型互联网系统, ...

  9. 少儿编程|Scratch编程教程系列合集，总有一款适合你

    如果觉得资源不错,友情转发,贵在分享!!! 少儿编程Scratch: 少儿编程Scratch第一讲:Scratch完美的初体验少儿编程Scratch第二讲:奇妙的接球小游戏少儿编程Scratch第三讲 ...

随机推荐

  1. 3月2日 Linked List Cycle

    今天星期天,准备好周一的PPT内容,再回来做题,以后考虑周末做一个APP或者微信帐号玩吧. 回到题目, Linked List Cycle,一个检查单项链表是否有环路的问题. 题目周五的时候就简单做过 ...

  2. 华为OJ—火车进站（栈，字典排序）

    http://career-oj.huawei.com/exam/ShowSolution?method=SolutionApp&id=2282 给定一个正整数N代表火车数量,0<N&l ...

  3. XCode 7.1 安装 Alcatraz包管理器失败的处理

    按照官方的文档(https://github.com/supermarin/Alcatraz),先卸载再重新安装即可.步骤如下: 1. 退出Xcode 2. rm -rf ~/Library/Appl ...

  4. CentOS学习笔记--目录配置

      Linux目录配置 类Linux的目录看上去差不多,为什么? 以下内容节选自l 鸟哥的 Linux 私房菜 -- 基础学习篇目录  第六章.Linux 的文件权限与目录配置 3. Linux目录配 ...

  5. event.preventDefault()

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. linux基本使用(一)

    分区1./ 根分区2. swap 交换分区(大小建议是内存的1~2倍)3. /home 分区4./boot 引导文件(启动加载)分区5./var 等,最低 要有前2个分区吧,最好有home分区,因为没 ...

  7. Spring中Quartz调度器的使用

    一.Quartz的特点 * 按作业类的继承方式来分,主要有以下两种: 1.作业类继承org.springframework.scheduling.quartz.QuartzJobBean类的方式 2. ...

  8. Ubuntu14.04 切换root账户su root失败解决办法

    原因是需要备份一个vimrc,可是cp就提示Permission denied. su root就提示su: Authentication failure 解决办法: sudo passwd root ...

  9. scala实现kmeans算法

    算法的概念不做过都解释,google一下一大把.直接贴上代码,有比较详细的注释了. 主程序: import scala.io.Source import scala.util.Random /** * ...

  10. STL之容器基本操作

    容器类 STL Container Header Applications vector <vector> 直接访问任意元素,快速插入.删除尾部元素 deque <deque> ...