HTML表格



案例展示


用HTML语言建立的表格


 

  html1.png 

 

简单的网页布局


 

  html2.png 

 



<table>标记


基本格式


<table 属性1="属性值1" 属性2="属性值2" ... ... >表格内容</table>


例子:


<html>
<head>
<title>表格</title>
<meta charset=”UTF-8”>  注释:防止乱码
</head>
<body>
<table>
<caption>表格的标题</caption>
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>四年级一班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr>
<td>四年级一班</td>
<td>李四</td>
<td>14</td>
<td>90</td>
</tr>
<tr>
<td>四年级一班</td>
<td>王五</td>
<td>18</td>
<td>50</td>
</tr>
</table>
</body>
</html>

 

  html3.png 

 


table标记的属性


(1)width属性

表示表格的宽度,他的值可以是像素(px)也可以是父级元素的百分百(%)

(2)height属性

表示表格的高度,他的值可以是像素(px)也可以是父级元素的百分百(%)

(3)border属性

表示表格外边框的宽度

例子:

<html>
<head>
<title>表格</title>
<meta charset=”UTF-8”>  注释:防止乱码
</head>
<body>
<table width=”960”  height=”300” border=”1”>
<caption>表格的标题</caption>
<tr>
<th>班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>四年级一班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr>
<td>四年级一班</td>
<td>李四</td>
<td>14</td>
<td>90</td>
</tr>
<tr>
<td>四年级一班</td>
<td>王五</td>
<td>18</td>
<td>50</td>
</tr>
</table>
</body>
</html>

 

  html4.png 

 

(4)align属性

表格的显示位置

left---居左显示

center---居中显示

right---居右显示

默认值left

例:<table width=”960”  height=”300” border=”1” align=”center”>

整个边框居中

 

  html5.png 

 

(5)cellspacing属性

单元格之间的间距,默认是2px,单位像素

<table width=”960”  height=”300” border=”1” align=”center”  cellspacing=“20”>

 

  html6.png 

 

(6)cellpadding属性

单元格内容与单元格边框的显示距离,单位像素

<table width=”960”  height=”300” border=”1” align=”center”  cellspacing=”20” cellpadding=”10”>

 

 html7.png 

 

(7)frame属性

1。作用

控制表格边框最外层的四条线框

2.属性值

void(默认值):表示无边框

above:表示仅顶部有边框

below:表示仅有底部边框

hsides:表示仅有顶部边框和底部边框  

lhs:表示仅有左侧边框

rhs:表示仅有右侧边框

vsides:表示仅有左右侧边框

box:包含全部4个边框

border:包含全部4个边框

 

(8)rules属性

作用

控制是否显示以及如何显示单元格之间的分割线

属性值

none(默认值)---表示无分割线

<table width=”960”  height=”300” border=”1” align=”center”  cellspacing=”20” cellpadding=”10” rules=”none”>

 

  html8.png 

 

all---表示包括所有分割线

<table width=”960”  height=”300” border=”1” align=”center”  cellspacing=”20” cellpadding=”10” rules=”all”>

 

  html9.png 

 

rows---表示仅有行分割线

clos---表示仅有列分割线

groups---表示仅在行组和列组之间有分割线

 


<caption>标记


什么时候使用


如果表格需要使用标题,那么就可以使用<caption>标记

 

如何正确使用


<caption>属性的插入位置,直接位于<table>属性之后,<tr>表格行之前

align属性

属性值

(1)top

标题放在表格的上部

(2)bottom

标题放在表格的下部

(3)left

标题放在表格的左部

(4)right

标题放在表格的右部

 


<tr>标记


定义表格的一行,对于每一个表格行,都是由一对<tr>...</tr>标记表示,每一行<tr>标记内可以嵌套多个<td>或者<th>标记

可选属性。


bgcolor属性---设置背景颜色


格式如下:

bgcolor="颜色值"

例子:


<html>
<head>
<title>表格</title>
<meta charset=”UTF-8”>  注释:防止乱码
</head>
<body>
<table width=”960”  height=”300” border=”1” align=”center”  cellspacing=”20” cellpadding=”10” rules=”all”>
<caption align=”bottom”>表格的标题</caption>
<tr bgcolor=”red”>
<th >班级</th>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>四年级一班</td>
<td>张三</td>
<td>16</td>
<td>80</td>
</tr>
<tr>
<td>四年级一班</td>
<td>李四</td>
<td>14</td>
<td>90</td>
</tr>
<tr>
<td>四年级一班</td>
<td>王五</td>
<td>18</td>
<td>50</td>
</tr>
</table>
</body>
</html>


第一行变为红色 <tr bgcolor=”red”>

 

  html10.png 

 

align属性---设置垂直方向对齐方式


格式:

align="值"

bottom---靠顶端对齐

top---靠底部对齐

middle---居中对齐

 

valign属性---设置水平方向对齐方式


格式:

valign="值"

left---靠左对齐

right---靠右对齐

center---居中对齐

 


<td>和<th>


1.<td>和<th>都是单元格的标记,其必须嵌套在<tr>标签内,是成对出现

2.两者的区别

<th>是表头标记,通常位于首行或者首列,<th>中的文字默认会被加粗,而<td>不会

<td>是数据标记,表示该单元格的具体数据

3.共同之处

两者的标记属性都是一样的

4。属性

bgcolor:设置单元格背景

align:设置单元格对齐方式

valign:设置单元格垂直对齐方式

width:设置单元格宽度

height:设置单元格高度

rowspan:设置单元格所占行数

例子:<th bgcolor=”red” align=”left ” rowspan=”2” >班级</th>


“班级”就会占用2行

 

 html11.png 

 

 

colspan:设置单元格所占列数

 

 

【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

 

logo
© 2012-2016 www.trishajaya.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部

澳洲幸运10开奖结果 极速快乐十分 快乐赛车 PK10哪个平台赔率高 幸运飞艇官网 欢乐生肖 欢乐生肖 福建11选5开奖 99彩票网站 幸运飞艇官网