Html表格相关标记

最新推荐文章于 2022-02-26 22:10:17 发布

chuanduo1947

最新推荐文章于 2022-02-26 22:10:17 发布

阅读量615

点赞数

原文链接：https://my.oschina.net/u/3836799/blog/1800901

版权

表格基本结构：

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

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

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

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

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

属性：

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>

简单网页布局实例：

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

转载于:https://my.oschina.net/u/3836799/blog/1800901

chuanduo1947

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html表格相关标记

表格基本结构： <table>标记： <table 属性1=“”属性2=“”….> 内容</table> <caption>内容</caption>：表格标题 <tr></tr>表示行:每行可以嵌...
复制链接

扫一扫