用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>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>And this table has no
borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
表格头:
<html>
<body>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555
77 854</td>
<td>555
77 855</td>
</tr>
</table>
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First
Name:</th>
<td>Bill
Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555
77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555
77 855</td>
</tr>
</table>
</body>
</html>
有标题的表格:
<html>
<body>
<h4>
This table has a caption,and a thick border:
</h4>
<table border="6">
<caption>My Caption</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
单元格跨行(列)的表格:
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th
colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill
Gates</td>
<td>555
77 854</td>
<td>555
77 855</td>
</tr>
</table>
<h4>Cell that spans two
rows:</h4>
<table border="1">
<tr>
<th>First
Name:</th>
<td>Bill
Gates</td>
</tr>
<tr>
<th
rowspan="2">Telephone:</th>
<td>555
77 854</td>
</tr>
<tr>
<td>555
77 855</td>
</tr>
</table>
</body>
</html>
表格内的其他标签:
<html>
<body>
<table border="1">
<tr>
<td>
<p>This
is a paragraph</p>
<p>This
is another paragraph</p>
</td>
<td>This
cell contains a table:
<table
border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</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>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>A background image:</h4>
<table border="1"
background="/images/bgdesert.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
这个例子说明了如何给表格增加背景。
<html>
<body>
<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td
bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="/images/bgdesert.jpg">Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
这个例子说明了如何给一个或多个单元格增加背景。
cellpadding属性:
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
这个例子说明了如何使用cellpadding属性在表格内容和边框之间留出更多空白。
cellspacing属性:
<html>
<body>
<h4>Without cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
这个例子说明了如何使用cellspacing属性来增加单元格间距。
给单元格内容设置对齐方式:
<html>
<body>
<table width="400"
border="1">
<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>
<td
align="right">$241.10</td>
<td
align="right">$50.20</td>
</tr>
<tr>
<td
align="left">Make-Up</td>
<td
align="right">$30.00</td>
<td
align="right">$44.45</td>
</tr>
<tr>
<td
align="left">Food</td>
<td
align="right">$730.40</td>
<td
align="right">$650.00</td>
</tr>
<tr>
<th
align="left">Sum</th>
<th
align="right">$1001.50</th>
<th
align="right">$744.65</th>
</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中添加表格行不通,那我们可以在借助第三方组 ...
随机推荐
- java中调用kettle转换文件
java中调用kettle转换文件 通过命令行也能够调用,然后java中调用命令行代码也能够.这样没有和java代码逻辑无缝集成.本文说明kettle5.1中假设通过其它API和java代码无缝集成: ...
- RTSP - RTP over TCP
RTP over RTSP(TCP)(一) RTP over RTSP包混合发送的解决办法 RTSP - RTP over TCP To use TCP communication, ...
- name_search方法的使用
转自:http://blog.csdn.net/littlebo01/article/details/22075573 在many2one类型中,页面下拉时会首先触发name_search方法,参数这 ...
- linux svn恢复删除的文件夹和文件(转)
我觉得在window下面,查找被删除的svn文件夹和文件是件比较麻烦的事,恢复就更麻烦了.有的时候,命令还是比鼠标要好用的. 下面做一个例子来说明一下,删除和恢复的例子. [root@BlackGho ...
- Lr_debug_message,Lr_output_message,Lr_error_message,Lrd_stmt,Lrd_fetch
今天在群里,问了 Lr_debug_message,Lr_output_message,Lr_error_message,Lrd_stmt,Lrd_fetch.下 面我整理了下Lr_debug_mes ...
- 年关了,抛一个模拟ip刷票的php程序
<?php $ip = $_GET['ip'] ? $_GET['ip'] : '1.1.1.1'; $ipArr = explode(".", $ip); $ipArr[3 ...
- python生成.exe
python生成.exe 1.在Anaconda Prompt终端输入pip install pyinstaller 2.输入python -m pip install pypiwin32 pytho ...
- oracle经验小节2
1,instr 函数 在Oracle/PLSQL中,instr函数返回要截取的字符串在源字符串中的位置. 语法如下: instr( string1, string2 [, start_position ...
- Image.Save出错 GDI 一般错误
一般是路径问题 需要转化为绝对路径 \转换为/ if (HttpContext.Current!=null) outPath = HttpContext.Current.Server.MapPath( ...
- PadLeft函数
string num=12 num.PadLeft(4, '0'); //结果为为 '0012' 看字符串长度是否满足4位,不满足则在字符串左边以"0"补足