用HTML创建表格

本章目标：了解掌握表格的基本结构<table><tr><th><td>
掌握跨行、跨列属性colspan
rowspan
掌握表格相关修饰属性border
width height bgcolor background height cellpadding cellspacing

本章重点：掌握表格的基本结构及相关属性

本章难点：掌握跨行、跨列属性colspan rowspan

一、
HTML 表格

表格:

表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。想不想尝试一下？

表格和border属性：

如果不指定border属性，表格将不显示边框。有时候这很有用，但是多数时候我们希望显示边框。

表格头：

表格头使用<th>标签指定。

表格中的空单元格

在多数浏览器中，没有内容的单元格显示得不太好。

注意一下空单元格的边框没有显示出来。为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。

基本注意点——有用的技巧

通常很少使用<thead>，<tbody>，<tfoot>标签，因为浏览器对它们的支持不好。希望这个在XHTML的未来版本中得到改变。

更多示例：

没有边框的表格：

<html>

<body>

<h4>This table has no
borders:</h4>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>And this table has no
borders:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

表格头：

<html>

<body>

<h4>Table headers:</h4>

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill
Gates</td>

</tr>

</table>

<h4>Vertical headers:</h4>

<tr>

<th>First
Name:</th>

<td>Bill
Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

</table>

</body>

</html>

有标题的表格：

<html>

<body>

<h4>

This table has a caption,and a thick border:

</h4>

<caption>My Caption</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

单元格跨行（列）的表格：

<html>

<body>

<h4>Cell that spans two columns:</h4>

<tr>

<th
colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill
Gates</td>

</tr>

</table>

<h4>Cell that spans two
rows:</h4>

<tr>

<th>First
Name:</th>

<td>Bill
Gates</td>

</tr>

<tr>

<th
rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

表格内的其他标签：

<html>

<body>

<tr>

<td>

<p>This
is a paragraph</p>

<p>This
is another paragraph</p>

</td>

<td>This
cell contains a table:

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>This
cell contains a list

<ul>

<li>apples</li>

<li>bananas</li>

<li>pineapples</li>

</ul>

</td>

<td>HELLO</td>

</tr>

</table>

</body>

</html>

给表格增加背景色或者背景图像：

<html>

<body>

<h4>A background color:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>A background image:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

这个例子说明了如何给表格增加背景。

<html>

<body>

<h4>Cell backgrounds:</h4>

<tr>

<td
bgcolor="red">First</td>

</tr>

<tr>

<td
background="/images/bgdesert.jpg">Second</td>

</tr>

</table>

</body>

</html>

这个例子说明了如何给一个或多个单元格增加背景。

cellpadding属性：

<html>

<body>

<h4>Without cellpadding:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellpadding:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。

cellspacing属性：

<html>

<body>

<h4>Without cellspacing:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

<h4>With cellspacing:</h4>

<tr>

<td>First</td>

</tr>

<tr>

<td>Second</td>

</tr>

</table>

</body>

</html>

这个例子说明了如何使用cellspacing属性来增加单元格间距。

给单元格内容设置对齐方式：

<html>

<body>

<tr>

<th
align="left">Money spent on....</th>

<th
align="right">January</th>

<th
align="right">February</th>

</tr>

<tr>

<td
align="left">Clothes</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

这个例子说明了如何使用“align”属性来设置单元格的对齐方式，让表格好看一些。

用HTML创建表格的更多相关文章

Hive创建表格报【Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException】引发的血案
在成功启动Hive之后感慨这次终于没有出现Bug了,满怀信心地打了长长的创建表格的命令,结果现实再一次给了我一棒,报了以下的错误Error, return code 1 from org.apache ...
示例-创建表格-指定行列&删除表格的行和列
<body> <script type="text/javascript"> /* *上面的方法和你麻烦. *既然操作的是表格, *那么最方便的方式就是使用 ...
示例-创建表格&使用表格对象
@charset "utf-8";/* CSS Document */table{ border:#249bdb 1px solid; width:500px; border-co ...
JavaScript创建表格的两种方式
方式一: var data = [ { id: 1, name: "first", age: 12 }, { id: 2, name: "second", ag ...
如何利用Dreamwever快速创建表格？？？
这样的一张表,用table写完感觉好累,很多单元格都不一样大,还要单独设置样式,今天还分享下用Dreamwever快速创建表格. 可能这会有人知道了!当然是插入表格了!
[原创]Devexpress XtraReports 系列 2 创建表格报表
昨天发表了Devexpress XtraReports系列开篇,今天我们继续. 今天的主题是创建表格报表. 首先我们来看看最后实现的效果.Demo最后附上. 接下来开始讲解如何一步一步做出这个报表: ...
使用JS创建表格以及隔行换色（包括隔N行换色）
<html> <head> <title></title> <style> table{ width:800px; border-colla ...
今天学习了无序列表和有序列表和使用HTML5创建表格
ol建立有序列表,该列表可以用设置type="A/a" 其语法架构为 <ol> <li></li> <li></li> ...
FineUIMvc随笔 - 动态创建表格列
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求用户希望实现动态创建表格列,在 WebForms 中,我们通过在 Page_Init 中创建列来实现: 但是在 MVC ...
C# 如何在PDF文档中创建表格
表格能够直观的传达数据信息,使信息显得条理化,便于阅读同时也利于管理.那在PDF类型的文档中如何来添加表格并且对表格进行格式化操作呢?使用常规方法直接在PDF中添加表格行不通,那我们可以在借助第三方组 ...

随机推荐

maven镜像制作
故事背景: 需要在客户现场部署测试demo,由于部署环境不提供外网环境,应用所需依赖无法通过外网下载. 初步的解决方案,在本地起一个maven的容器,将代码copy到maven的容器内,进行打包操作, ...
使用iOS-QR-Code-Encoder 生成二维码
一:所需类库 iOS-QR-Code-Encoder 官网主页:https://github.com/moqod/iOS-QR-Code-Encoder 导入:QuartzCore.framework ...
企业建站系统MiinCMP1.0.5 标准版公布!
2014-5-6日,Juuluu公布其企业建站系统MiinCMP1.0.5 标准版,1.0.5是一款相对成熟的企业站点解决方式.执行MiinCMP1.0.5,仅仅需2M的mysql,50m的java空 ...
读-《c++设计新思维-泛型编程与设计模式之应用》经典记录（英文书名：《modern c++ design》）
1.以设计为目标的程序库都必须帮助使用者完毕静止的设计.以实现使用者自己的constraints,而不是实现预先定义好的constraints. 2.Anything that can be done ...
OGNL表达式语言网上转来的
1.概念:OGNL是ObjectGraphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目. Struts 2框架使用OGNL作为默认的表达式语言. 2.功能: ...
Python 使用 UTF-8 编码(转)
Python 使用 UTF-8 编码(转) 原文出处:http://blog.chenlb.com/2010/01/python-use-utf-8.html 一般我喜欢用 utf-8 编码,在 py ...
java基础讲解01-----简单了解一下java
2017-4-12(晚) 闲来无事,静静把自己了解的java,好好回忆一次.如果能帮助别人也好.会不断补充 java有关的书籍真的很多,我也不过多的介绍了. 1.什么是java 2.java的语言特 ...
composer自动加载一个文件后必须执行命令composer dump-autoload
"autoload": { "classmap": [ "database" ], "psr-4": { "A ...
cocos2dx 3.x simpleAudioEngine 长音效被众多短音效打断问题
假设先play长音效a,然后在a播放过程中反复执行:play短音效b,stop b,play b,... 则若a足够长,就会被b打断.而长音效被打断是最不可接受的. a之所以会被打断,推测原因是sim ...
Java编程介绍
原文地址:http://happyshome.cn/blog/java/introduction.html 本文介绍的编程基础知识很Java适合刚開始学习的人. 要学习编程,你须要了解编程语言的语法和 ...

用HTML创建表格

一、 HTML 表格

用HTML创建表格的更多相关文章

随机推荐

热门专题

一、
HTML 表格