站长之站 站长之站QQ群:16356000 100345456 16263640 130690866
还没有任何记录...
当前位置:站长之站 > 网页设计 > 正文 > HTML教程 第四章 table表格

HTML教程 第四章 table表格

来源:网络作者:网络日期:2012/2/12 0:52:00收藏
本文链接:HTML教程 第四章 table表格http://www.cncncc.com/ArtSJ/Show.Asp?id=4228

表格的基本结构

 <table>...</table>  定义表格
 <caption>...</caption> 定义标题
 <tr>  定义表行
 <th>  定义表头
 <td>  定义表元(表格的具体数据)


以下是一个简单的例子:

<table border=1>

<tr><th>姓名</th><th>性别</th><th>年龄</th>

<tr><td>王林</td><td>男</td><td>25</td>      

</table>
显示结果
姓名性别年龄
王林25
 

表格的标题

  表格标题的位置,可由ALIGN属性来设置,其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。

  设置标题位于表格上方:

    <caption align=top> ... </caption>

  设置标题位于表格下方:

     <caption align=bottom> ... </caption>


<table border>
 <caption align=top>旅游日程</caption>
 <tr>
   <th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
 <tr>
   <th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>
</table>

显示结果:


旅游日程  

日期9-1111-1313-14
旅游地点青岛黄山杭州


<table border>
 <caption align=bottom>旅游日程</caption>
 <tr>
   <th>日期</th><td>9-11</td><td>11-13</td><td>13-14</td>
 <tr>
   <th>旅游地点</th><td>青岛</td><td>黄山</td><td>杭州</td>

</table>

日期9-1111-1313-14
旅游地点青岛黄山杭州


旅游日程



表格尺寸设置

表格的大小

  一般情况下,表格的总长度和总宽度是根据各行和各列的总和自动调整的,如果我们要直接固定表格的大小,
可以使用下列方式:

           <table width=n1 height=n2>

  width和height属性分别指定表格一个固定的宽度和长度,n1和n2可以用像素来表示,也可以用百分比
(与整个屏幕相比的大小比例)来表示。

  下表是一个长为200像素,宽为100像素的表格。<table width="200" height="100">

    
      

  下表是一个长为屏幕的20%,宽为屏幕的10%的表格。<table width=20% height=10%>

      
      


边框尺寸设置

  边框是用border属性来体现的,它表示表格的边框边厚度和框线。将border设成不同的值,有不同的效果。

如:

<table border=10 width=250>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>

显示结果为:

定货单

苹果香蕉葡萄
200公斤200公斤100公斤


<table border=1 width="250">
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>

显示结果:

定货单

苹果香蕉葡萄
200公斤200公斤100公斤


<table border=0 width="250">
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>

显示结果:

定货单

苹果香蕉葡萄
200公斤200公斤100公斤


格间线宽度

  格与格之间的线为格间线,它的宽度可以使用<TABLE>中的CELLSPACING属性加以调节。格式是:

     <TABLE CELLSPACING=#>   #表示要取用的像素值

例:

<table border=3  cellspacing=5>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>

显示结果为:

定货单

苹果香蕉葡萄
200公斤200公斤100公斤


内容与格线之间的宽度

  我们还可以在<TABLE>中设置CELLPADDING属性,用来规定内容与格线之间的宽度。格式为:

          <TABLE CELLPADDING=#>   #表示要取用的像素值

例:

<table border=3  cellpadding=5>
<caption>定货单</caption>
<tr><th>苹果</th><th>香蕉</th><th>葡萄</th>
<tr><td>200公斤</td><td>200公斤</td><td>100公斤</td>
</table>

显示结果为:

定货单

苹果香蕉葡萄
200公斤200公斤100公斤


 
 
 

表格内文字的对齐/布局


  表格中数据的排列方式有两种,分别是左右排列和上下排列。左右排列是以ALIGN属性
来设置,而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种:居左(left)
居右(right)和居中(center);而上下排列基本上比较常用的有四种:上齐(top)
居中(middle)、下齐(bottom)和基线(baseline)。

<tr align=#>
<th align=#>   #=left, center, right

<td align=#>


<tr valign=#>
<th valign=#>   #=top,middle,bottom,baseline
<td valign=#>


左右排列

<table border=1 width="200">
<tr>
  <th>居左</th><th>居中</th><th>居右</th>
<tr>
  <td align=left>A</td> <td align=center>B</td> <td align=right>C</td>
</table>

显示结果:

居左居中居右
ABC


上下排列

<table border=1 width="250" heith="100">
<tr>
    <th>上齐</th><th>居中</th> <th>下齐</th><th>基线</th>
<tr>
    <td valign=top>A</td> <td valign=middle>B</td> <td valign=bottom>C</td><td valign=baseline>D</td>
</table>

显示结果:

    上齐居中下齐基线
    ABCD


 


跨多行、多列的表元

  要创建跨多行、多列的表元,只需在<TH>或<TD>中加入ROWSPAN或COLSPAN属性,这两个属性的值,表明了表元中要跨越的行或列的个数。

 跨多列的表元 <th colspan=#> <td colspan=#>
  colspan表示跨越的列数,例如colspan=2表示这一格的宽度为两个列的宽度。

 跨多行的表元 <th rowspan=#> <td rowspan=#> 
  rowspan所要表示的意义是指跨越的行数,例如rowspan=2就表示这一格跨越表格两个行的高度。


跨多列的表元

<html>
<head>
<title>表格TABLE</title>
</head>
</html>

<table border>
<tr><th colspan=3>值班人员 </th>
<tr><th>星期一</th>       <th>星期二</th>  <th>星期三</th>
<tr><td>李强</td><td>张明</td><td>王平</td>
</table>
显示结果
值班人员
星期一星期二星期三
李强张明王平

跨多行的表元

<html>
<head>
<title>表格TABLE</title>
</head>
</html>

<table border>
<tr><th rowspan=2>值班人员</th>
<th>星期一</th><th>星期二</th>  <th>星期三</th></tr>
<tr><td>李强</td><td>张明</td><td>王平</td></tr>
</table>
显示结果
值班人员星期一星期二星期三
李强张明王平

 


在表格中,既可以对整个表格填入底色,也可以对任何一行、一个表元使用背景色。

  表格的背景色彩   <table bgcolor=#>

  行的背景色彩    <tr bgcolor=#>

  表元的背景色彩   <th bgcolor=#>或 <td bgcolor=#>

  #=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称:
  Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua


例:

<html>
<head>
<title><title>
</head>

<table border=2 bgcolor=aqua>
<tr>
<th bgcolor=ffaa00>彩电</th> <th bgcolor=Red>冰箱</th> <th rowspan=2>家电</th>
<tr bgcolor=yellow>
<td>A</td><td>B</td>
</table>

</body>
</html>

显示结果

彩电 冰箱 家电
A B


作者:站长之站 收集整理,任何媒体转发须保留作者个人微信和来源,不尊重作者劳动的行为将受到举报。
本文链接:HTML教程 第四章 table表格http://www.cncncc.com/ArtSJ/Show.Asp?id=4228

【HTML教程 第四章 table表格】由站长之站收集整理,您可以自由传播,请主动带上本文链接

觉得有用就多来支持一下,没有能帮到您,站长之站也只能表示遗憾,希望有一天能帮到您。

(责任编辑:站长之站)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
站长之站 · CNCMS
站长之站 测试频道
业界动态
业界动态 门户网站 聚焦人物 电子商务 站长新闻 观察评论
编程开发
ASP教程 .NET教程 JSP教程 PHP教程 Xml/Xslt Shtml教程 CGI专区 JavaScrip 其他编程
服务器类
Web服务器 Ftp服务器 Mail服务器 Dns服务器 Linux服务器 Win服务器 安全防护 服务器其他
建站指南
主机域名 建站入门 建站经验 网站推广 网站优化 网站策划 网络赚钱 网络创业 SEO 专区
网页设计
Html教程 设计心得 动态网页 JS/Ajax Div/Css CSS教程 设计其它
软件教程
Photoshop Fireworks FLASH Dreamweaver Frontpage 其他教程
数据库类
MSAccess MS_SQL My_SQL VFP PowerBuilder Oracle 其它数据
全站导航
业界动态编程开发服务器类建站指南网页设计软件教程数据库类
关于我们/版权
版权所有:
Copyright © 2008 - 2019 站长之站 www.cncncc.com
PowerBy:CNCMS(5.1.20)

苏ICP备16002106号-1