英特尔处理器分类:学习笔记——如何创建HTML表格

             多福老人欢迎您
地址：http://qwp43.360doc.com
www.blabla.cn网页教程与代码的中文站点 HTML 教程与实例代码 HTML 教程 HTML 基本概念 HTML 基础 Tag HTML 常用格式 HTML 特殊字符 HTML 超链接 (Hyperlinks) HTML 相对路径和绝对路径 HTML 表格 (Tables) HTML 框架 (Frames) HTML 列表 (Lists) HTML 表单 (Forms) HTML 图片 (Images) HTML 字体 (Fonts) HTML 背景颜色和图片 HTML 头部信息 (Head) HTML 代码实例 HTML 参考 HTML 知识库 （七）如何创建HTML表格http://www.blabla.cn/html_tutorials/025_HTML_tables.html
学习笔记
内容
三个Tag
建表格
建一行单元格
建一列单元格
属性
border
border="1"格线的宽度
border="0"或省略，则无边界

姓名      表格的表头
空的单元格
之间没有内容，表格无边界
插入一个 空格符，可显边界
添加标题
表格标题
rowspan
rowspan="2"两行
设置包含多行的单元格
colspan
colspan="2"两列
设置包含多列的单元格
单元格里的内容
单元格的内容可以是文字，图片，超链接，Form，表格等。
cellpadding
设置内容与格边界之间的距离。
cellspacing
设置格间的距离
bgcolor
bgcolor="red
添加背景颜色
background
添加背景图片
background="图片地址"
align
单元格内容的对齐方式
制表
HTML表格用表示。
一个表格可以分成很多行(row)，用表示；
每行又可以分成很多单元格(cell)，用之间没有内容，那么这个单元格的边界是不会被显示出来的，尽管整个表
格已设置边界值。要显示这个单元格的边界，可以插入一个 空格符。
示例

表示。 这三个Tag是创建表格最常用的Tag。 示例 表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。 只有一行(Row)一列(Column)的表格 100 一行三列的表格 100 200 300 两行三列的表格 100 200 300 400 500 600 效果 表格所用到的Tag： 整个表格开始要用table； 每一行开始要用tr； 每一单元格开始要用td。 只有一行(Row)一列(Column)的表格 100 一行三列的表格 100 200 300 两行三列的表格 100 200 300 400 500 600 border属性 在缺省情况下，即如果不设置表格的边界，表格是不显示边界的 示例：不显示边界的表格 缺省 border情况下，表格没有边界。 100 200 300 400 500 600 表格Border设为0，也不显示边界： 100 200 300 400 500 600 效果 缺省情况下，表格没有边界。 100 200 300 400 500 600 表格Border设为0，也不显示边界： 100 200 300 400 500 600 要显示表格的边界，可使用border这个属性。 示例：显示边界的表格 表格的边界值设为1： 第一 行 第二 行 表格的边界值设为8，边界更粗： 第一 行 第二 行 表格的边界值设为15，边界更粗： 第一 行 第二 行 效果 表格的边界值设为1： 第一 行 第二 行 表格的边界值设为8，边界更粗： 第一 行 第二 行 表格的边界值设为15，边界更粗： 第一 行 第二 行 表格的表头 用	来表示表格的表头，表头的字是粗体显示的。 示例： 有表头的表格 有表头的表格： 姓名 电话 传真 Bill Gates 555 77 854 555 77 855 竖直方向的表头： 姓名 Bill Gates 电话 555 77 854 传真 555 77 855 效果 有表头的表格： 姓名 电话 传真 Bill Gates 555 77 854 555 77 855 竖直方向的表头： 姓名 Bill Gates 电话 555 77 854 传真 555 77 855 空的单元格 如果表格的单元格

Some text	Some text
	Some text

上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了
边界值。

Some text	Some text
&bsp	Some text

上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。

注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。

效果
Some text Some text
Some text
上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，
虽然整个表格设了边界值。
Some text Some text
&bsp Some text
上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。
注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。
有标题的表格
这个示例演示如何用在一个表格上加上标题。

这个表格有标题：

表格标题

100	200	300
400	500	600

效果
这个表格有标题：
表格标题 100 200 300
400 500 600
包含多列或多行的单元格
这个示例演示如何用colspan，rowspan设置多列或者多行的单元格。

用 colspan 属性，设置包含多列的单元格：

姓名	联系方式
Bill Gates	555 77 854	555 77 855

用rowspan这个属性，设置包含多行的单元格：

姓名	Bill Gates
联系方式	555 77 854
	555 77 855

效果
用 colspan 属性，设置包含多列的单元格：
姓名 联系方式
Bill Gates 555 77 854 555 77 855
用rowspan这个属性，设置包含多行的单元格：
姓名 Bill Gates
联系方式 555 77 854
555 77 855
 单元格里的内容
这个例子演示单元格里面的内容。
单元格的内容可以是文字，图片，超链接，Form，表格等。

这是一段 这是另外一段。	这个单元格里包含了一个表格： A B C D
这个单元格里包含了一个图片：	HELLO

效果
这是一段
这是另外一段。
这个单元格里包含了一个表格： A B
C D
这个单元格里包含了一个图片：  HELLO
分析：关注单元格中HELLO，代码中没有对齐设定，但其处于左对齐，上下中对其状态，看来这是默认态。即：没有对齐设定时，默认处于左对齐，上下为中对齐状态。单元格内容与单元格边界之间的距离
这个示例教你如何用cellpadding这个属性设置单元格内容与单元格边界之间的距离。

没有cellpadding的表格：

First	Row
Second	Row

设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。

以下是设置了cellpadding属性的表格：

第一	行
第二	行

cellpadding属性值设置为30的表格：

第一	行
第二	行

效果
没有cellpadding的表格：
First Row
Second Row
设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。
以下是设置了cellpadding属性的表格：
第一 行
第二 行
cellpadding属性值设置为30的表格：
第一 行
第二 行
单元格之间的距离
这个示例教你如何用cellspacing这个属性设置单元格之间的距离

Cellspacing属性表示单元格之间的距离。

如果表格里没有设置cellspacing属性，缺省情况下，默认cellspacing值为1。

第一	行
第二	行

Cellspacing属性值设为0的表格：

第一	行
第二	行

Cellspacing属性值设为20的表格：

第一	行
第二	行

效果
Cellspacing属性表示单元格之间的距离。
如果表格里没有设置cellspacing属性，缺省情况下，默认cellspacing值为1。
第一 行
第二 行
Cellspacing属性值设为0的表格：
第一 行
第二 行
Cellspacing属性值设为20的表格：
第一 行
第二 行
设置表格的背景颜色和背景图片
这个示例演示如何用bgcolor属性设置表格的背景颜色，
如何用background属性为表格添加背景图片。

给表格设置背景颜色：

第一	行
第二	行

给表格加背景图片：

第一	行
第二	行

效果
给表格设置背景颜色：
第一 行
第二 行
给表格加背景图片：
第一 行
第二 行
设置单元格的背景颜色和背景图片
这个示例演示如何用bgcolor属性设置单元格的背景颜色，
如何用background属性为单元格添加背景图片。

单元格背景色：

第二

第一	行
行

效果
单元格背景色：
第一 行
第二 行
单元格内容的对齐方式
对齐方式分为水平和垂直两方向
水平方向
align="left"（左对齐）
align="center"（居中）
align="right"（右对齐）
垂直方向
align="Left"（左对齐）
align="center""（中对齐）
align="right"（右对齐）
这个示例教你如何用align属性设置单元格内容的对齐方式。
align="left"（左对齐）
align="center"（居中）
align="right"（右对齐）
没有对齐设定时，默认处于左对齐，上下为中对齐状态。
表头始终是对中状态。
例

分数	期中考试	期末考试
芙蓉姐姐	250.10	50000.20
程菊花	1000.00	5000.45
周笔畅	2000.40	500.00
黄新	300.50	800.65

效果
分数 期中考试 期末考试
芙蓉姐姐 250.10 50000.20
程菊花 1000.00 5000.45
周笔畅 2000.40 500.00
黄新 300.50 800.65