Html表格相关标记

时间 2019-11-10

标签 html 表格相关标记栏目 HTML 繁體版

原文原文链接

表格基本结构：ide

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

<caption>内容</caption>：表格标题spa

<tr></tr>表示行:每行能够嵌套多个<td></td><th></th>ci

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

<th></th>表头标记，一般位于首行或者首列，文字会默认加粗。io

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

属性：gc

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

简单网页布局实例：margin

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