HTML中表格的使用是很重要的部分,那么我们今天来看看表格怎么用
1、一个表格的结构:
<table>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
2、<table>的常用属性
Width:表格的宽度
Height:表格的高度
Border:表格的边框线粗细
Bordercolor:边框线的颜色
Align:表格水平对齐方式,取值:left center right
bgColor:表格的背景颜色,bgColor=“#FF0000”
background:表格的背景图片URL。Background=“p_w_picpaths/bg.gif”
cellpadding:填充距离,指单元格边线到内容间的距离
cellspacing:间距,两个单元格之间的距离
3、<tr>的常用属性
Align:行中所有的单元格水平对齐,取值:left center right
Valign:行中所有的单元格垂直对齐,取值:top、middle、bottom
bgColor:行的背景颜色
height:行的高度
4、<td>或<th>的常用属性
<th></th>是标题单元格,其中的内容居中加粗显示;
<td></td>是普通单元格,默认居左显示
Width:单元格的宽度
Height:单元格的高度
bgColor:背景颜色
background:背景图片
align:水平对齐
valign:垂直对齐
colspan:合并列的单元格(跨列合并)
rowspan:合并行的单元格(跨行合并)
首先我们来试试写一个表
代码如下
<html>
<head>
<title>唐诗鉴赏 </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<table align="center" border="2" width="500" cellspacing="2" cellpadding="1" background="2.png" >
<tr height="40px">
<td colspan="4" align="center"><font face="华文彩云" size="6">唐诗鉴赏</font></td>
</tr>
<tr >
<td align="center" ><font color="red"><b>唐诗鉴赏</b></font></td>
<td align="center"><font color="red"><b>唐诗简介</b></font></td>
<td align="center"><font color="red"><b>名家名作</b></font></td>
<td align="center"><font color="red"><b>名作赏析</b></font></td>
<tr>
<td colspan="4" height="40px"></td>
</tr>
<tr align="center">
<td colspan="2"><a href="#"><b>李白</b></a></td>
<td colspan="2" rowspan="4"><img src="1.png"></td>
</tr>
<tr align="center">
<td colspan="2"><a href="#"><b>杜甫</b></a></td>
</tr>
<tr align="center">
<td colspan="2"><a href="#"><b>王维</b></a></td>
</tr>
<tr align="center">
<td colspan="2"><a href="#"><b>白居易</b></a></td>
</tr>
</table>
</body>
</html>