从零开始PHP之HTML(三)
更新:HHH   时间:2023-1-7


HTML中表格的使用是很重要的部分,那么我们今天来看看表格怎么用

1、一个表格的结构:

<table>

        <tr>

                <td>内容</td>

                <td>内容</td>

         </tr>

</table>

2<table>的常用属性

      Width:表格的宽度

      Height:表格的高度

      Border:表格的边框线粗细

      Bordercolor:边框线的颜色

      Align:表格水平对齐方式,取值:left center right

      bgColor:表格的背景颜色,bgColor=#FF0000

      background:表格的背景图片URLBackground=p_w_picpaths/bg.gif

      cellpadding:填充距离,指单元格边线到内容间的距离

      cellspacing:间距,两个单元格之间的距离

3<tr>的常用属性

      Align:行中所有的单元格水平对齐,取值:left  center right

      Valign:行中所有的单元格垂直对齐,取值:topmiddlebottom

      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>


返回web开发教程...