常用的表格元素组成了HTML的基本表格结构

break-word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">绘制表格

break-word; clear: both; text-indent: 2em; color: rgb(24, 30, 51); font-family: PingFangSC, 微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">常用的表格元素组成了HTML的基本表格结构

在HTML的语法中,表格一般通过3个标签元素来构建,常用的表格元素包括table(表格)元素、tr(表格行元素)、th(表头)元素和td(表格单元格)元素,它们组成了HTML的基本表格结构。

Table元素由tr元素组成,tr元素又由th(表头)元素或td(表格单元格)元素。如图2-28所示,左侧为基本表格的代码,右侧为该程序的网页显示效果,值得注意的是,HTML的基本表格元素并没有排版功能,因此在没用应用CSS的情况下,在游览器中是看不到表格线的。

下面通过案例2-28来演示表格元素的效果,如图2-28所示。

例2-28 example28.html

 

<!DOCTYPE  html>
 <html>
 <head>
     <meta  charset="UTF-8">
     <title>
表格元素</title>
 </head>
 <body>
     <table>
         <tr>
             <th>表头1</th>
             <th>表头2</th>
         </tr>
         <tr>
             <td>单元格1_1</td>
             <td>单元格1_2</td>
         </tr>
         <tr>
             <td>单元格2_1</td>
             <td>单元格2_2</td>
         </tr>
     </table>
 </body>
 </html>

 

1.设置表格的宽度和高度

表格的宽度和高度根据内容自动调整,也可以手动设置表格的宽度和高度,具体语法如下:

 

<table width=value   height=value>

 

<table border="3" height="200"  width="400"></table>

 

2.设置表格的边框

<table>标签的border属性设置表格边框。默认的情况下,表格的边框为0,具体语法如下:

 

<table border=value>   <table>

 

3.设置表格的对齐方式

表格中通过设置属性align的值来设定表格的对齐方式,对齐方式可以取值为:left\Center\righ,具体语法如下:

 

<table>    </table>

 

4.设置表格的背景颜色

bgcolor的值可以定义表格的背景颜色, value:颜色的值,英文颜色名称或十六进制颜色值,具体语法如下:

 

<table bgcolor=value>     </table>

 

5.设置表格的背景图片

设置属性background的值可以为表格的背景加入一张背景图片, value:图片的地址,绝对路径,也可以为相对路径,具体语法如下:

 

<table background=value>   </table>

 

下面通过案例2-29来演示表格元素属性应用的效果,如图2-29所示。

例2-29 example29.html

 

<!DOCTYPE   html ">
 <html >
 <head>
     <meta charset="utf-8"  />
     <title>
设置表格的属性</title>
 </head>
 <body>
     <table bgcolor="#ccc"height="200"  width="600"  border="2">
         <tr >
             <td><img  src="images/14.jpg"></td>
             <td><img  src="images/15.jpg"></td>
             <td><img  src="images/16.jpg"></td>
             <td><img  src="images/17.jpg"></td>
         </tr>
      </table>
 </body>
 </html>

                       


常用的表格元素组成了HTML的基本表格结构

图2-29 设置表格元素属性