继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

从零开始PHP之HTML(三)

哆啦的时光机
关注TA
已关注
手记 207
粉丝 20
获赞 53

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:合并行的单元格(跨行合并)



首先我们来试试写一个表

wKioL1YrnQmizV4WAAG_bIlulcE430.jpg


代码如下

<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>


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP