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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。