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=“images/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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
