Html表格相关标记

原创
2018/04/25 13:42
阅读数 114

    表格基本结构:

<table>标记: <table 属性1=“”属性2=“”….> 内容</table>

<caption>内容</caption>:表格标题

<tr></tr>表示行:每行可以嵌套多个<td></td><th></th>

<td><th>都是嵌套在<tr>标记内,成对出现。

<th></th>表头标记,通常位于首行或者首列,文字会默认加粗。

<td>是数据标记,表示该单元格具体数据。

属性:

  1. width:宽度
  2.  height:高度
  3. border:边框
  4.  align:对齐方式 ,left/center/right
  5. cellspacing:单元格之间间距
  6. cellspadding:单元格内容与单元格边框的显示距离。
  7. frame :  void:无边框 ,above:表示仅顶部有边框,below:表示仅底部边框,hsides:表示仅顶部边框和底部边框,lhs:表示仅左侧边框,rhs:表示仅右侧边框,vsides:表示仅左右侧边框,box:包含全部边框,border:包含全部4个边框。
  8. rules:控制是否显示以及如何显示单元格之间的分割线。None:无分割线,all:包括所有的分割线,rows:表示仅有行分割线,clos:表示仅有列分割线,groups:表示仅在行和列之间有分割线。
  9. <tr>属性;bgcolor:颜色,align:bottom,top,middle; valign:设置水平对齐方式:left,right,center.
  10. <td><th>..bgcolor,align,valign,width,height,rowspan,colspan

例子:

<table width="900" hight="500" border="1"  rules="all" cellspacing="500" cellpadding="10">

    <caption>这是表格的标题?</caption>

    <tr align="right" bgcolor="red" >

        <th>表头1</th>

        <th>表头2</th>

        <th>表头3</th>

        <th>表头4</th>

        <th>表头5</th>

        <th>表头6</th>

    </tr>

    <tr valign="top" >

        <td>数据1</td>

        <td>数据2</td>

        <td>数据3</td>

        <td>数据4</td>

        <td>数据5</td>

        <td>数据6</td>

    </tr>

    <tr>

        <td>数据1</td>

        <td>数据2</td>

        <td>数据3</td>

        <td>数据4</td>

        <td>数据5</td>

        <td>数据6</td>

    </tr>

    <tr>

        <td>数据1</td>

        <td>数据2</td>

        <td>数据3</td>

        <td>数据4</td>

        <td>数据5</td>

        <td>数据6</td>

    </tr>

      <tr>

        <td rowspan="5" colspan="4">数据1</td>

        <td>数据2</td>

        <td>数据3</td>



    </tr>

     <tr>

        <td>数据1</td>

        <td>数据2</td>

        <td>数据3</td>

        <td>数据4</td>

        <td>数据5</td>

        <td>数据6</td>

    </tr>

     <tr>

         <td>数据1</td>

        <td>数据2</td>

        <td>数据3</td>

        <td>数据4</td>

        <td>数据5</td>

        <td>数据6</td>

    </tr>

</table>

简单网页布局实例:

<body topmargin="0" marginleft="0" marginright="0">

  <table width="100%" hight="500" border="1"  rules="all"     cellspacing="0" cellpadding="0">



      <tr height="90" bgcolor="red" align="center" >

          <td> <font size="6" color="white"><b>网页的头部</b></font></td>

      </tr>

      <tr height="500"   >

        <td>

            <table width="20%" bgcolor="yellow" height="500" align="left">

               <tr><td align="center"> <font size="6" color="white"><b>网页的左部</b></font></td></tr>

            </table>

            <table width="80%" bgcolor="green" height="500" align="right">

                <tr><td align="center"> <font size="6" color="white"><b>网页的右部</b></font></td></tr>

            </table>

        </td>

      </tr>

      <tr height="90"    >

       <td align="center" bgcolor="red"> <font size="6" color="white"><b>网页的底部</b></font> </td>

      </tr>

  </table>

</body>
展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部