HTML基础篇之表格的运用

 

<html>
<head>
<title></title>
</head>
<body>
<table border=”1”>
<tr>
<th>我是表头1</th>
<th>我是表头2</th>
</tr>
<tr>
<td>第一列第一个单元格</td>
<td>第一列第二个单元格</td>
</tr>
<tr>
<td>第二列第一个单元格</td>
<td>第二列第二个单元格</td>

</tr>
</table>
</body>
</html>

 表格用的标签<table>,帮表格分行用<tr>;定义表格单元格<td>;<th> 定义表头;关于boeder这个会在等下讲表格的属性的时候会讲到。

这个是一个最简单的表格。你们可以这样理解<table>先创建一个空白的没有单元格的空表格,然后我们加入了X个tr和Y个td一个空白的空表格里面多了X列Y个单元格。X和Y分别是数字。然后我们在td里面加入自己的内容,一个简单的表格就生成了。

 

Table常用的属性

属性     属性值         理解

width         px、 %               指定表格的宽度   

height        px、%             表格的高度

border           px             指定表格边框的宽度

cellpadding     px              指定边框与内容之间的空白                

cellspacing    px、 %                 指定单元格之间的空白       

align            left、 right 、 center     指定对齐方式       

valign           top、 middle 、 bottom 垂直排列方式

Background=””             表格的背景图片

Bordercolor=””             表格边框的颜色

Bordercolorlight=””         亮边框的颜色

Bordercolordark=””                      暗边框的颜色

 

单元格合并属性   

<td colspan=”x”></td>

Colspan:合并列单元格,x为要合并的列数。

<td rowspan=”x”></td>

Rowspan:合并行单元格,x为要合并的行数

 

 

合并在表格中如何运用  

注:第一个为没有合并(为了让你们知道有哪些变化特地用了一个没有合并一个合并的)

<html>
<head>
<title></title>
</head>
<body>
<table border=”1”>
<tr>
<th>我是表头1</th>
<th>我是表头2</th>
</tr>
<tr>
<td >第一列第一个单元格</td>
<td >第一列第二个单元格</td>
</tr>
<tr>
<td>第二列第一个单元格</td>
<td>第二列第二个单元格</td>
</tr>
<tr>
<td>第三列第一个单元格</td>
<td>第三列第二个单元格</td>
</tr>
</table>

注:下面为合并的(合并了行单元格和列单元格)

<html>
<head>
<title></title>
</head>
<body>
<table border=”1”>
<tr>
<th>我是表头1</th>
<th>我是表头2</th>
</tr>
<tr>
<td colspan=”2”>第一列第一个单元格</td>
</tr>
<tr>
<td rowspan=”2”>第二列第一个单元格</td>
<td>第二列第二个单元格</td>
</tr>
<tr>
<td>第三列第二个单元格</td>
</tr>
</table>

注意:

合并的时候注意要把你写合并属性的那个单元格也要算上。不然合并会出现少合了一个。

列是表格从左往右,行是从上往下。(这句话结合表格看来看会清楚一点)

 

属性width、height、border、cellpadding、cellspacing的用法

<html>
<head>
<title></title>
</head>
<body>
<table border=”1”  width=”80%”  height=”100%”  cellpadding=”30px”  cellspacing=”20px” bordercolor=”#111000” bordercolorlight=”#00cc00” bordercolordark=”#cc00aa” background=”没有背景图片”>
<tr>
<th>我是表头1</th>
<th>我是表头2</th>
</tr>
<tr>
<td >第一列第一个单元格</td>
<td >第一列第二个单元格</td>
</tr>
<tr>
<td>第二列第一个单元格</td>
<td>第二列第二个单元格</td>
</tr>
<tr>
<td>第三列第一个单元格</td>
<td>第三列第二个单元格</td>
</tr>
</table>

大家可以复制一下之前表格的代码和上面这个代码看看有哪些变化。width是网页的所占宽度为百分之80,height高度为百分之100,这个属性我暂时较少用到还有后面的Bordercolorlight、Bordercolordark。

表格这里需要理解透彻不然在后面用表格编辑网页会经常出来错误。要多注意!!

posted @ 2016-08-04 23:25  迷。  阅读(168)  评论(0编辑  收藏  举报