1. 程式人生 > >組合標簽表格table

組合標簽表格table

邊距 row sed cell 結構 body gre 標簽 http

基本結構

    <table border = "1" >

        <tr>

          <td></td>

          <td></td>

        </tr>

        <tr>

          <td></td>

          <td></td>

        </tr》

    </table>

table屬性 : border 邊框 width 寬度 cellpadding 邊距 cellspacing間距

      表格寬度默認按照內容來,設置為100%會隨著網頁的縮放而縮放

      邊距是內容和邊框的距離

      間距是單元格和單元格的距離

<tr>是行 <td>是列的屬性

      weigh 寬度

      hight 高度

      align 對齊方式

其他標簽<th> 表頭<td>這兩個標簽是同級標簽

合並單元格(單元格的屬性)

      橫向合並(向右合並):colspan

      垂直(向下合並):rowspan

嵌套 在一個單元格內嵌套如一個新的表格

代碼:

技術分享圖片
 1 <body>
 2
<h3>表格</h3> 3 <table border="1" cellpadding="10" cellspacing="0"> 4 <!--cellpadding內容的距離邊距,cellspacing間距間距為0時只有一條線顯示,border邊框--> 5 <!--表格標題--> 6 <caption>我的表格</caption> 7 <tr> 8 <!--<th>表頭單元格--> 9 <th colspan="2" rowspan="2"
>表格1</th> 10 <!--colspan 合並行,rowspan合並列--> 11 <th >表格2</th> 12 </tr> 13 <tr> 14 <td>表格4</td> 15 </tr> 16 <tr> 17 <td>1</td> 18 <td>2</td> 19 <td>3</td> 20 </tr> 21 </table> 22 <br> 23 <br> 24 <table border="1" bgcolor="green" width="300" height="300"> 25 <!--bgcolor 顏色--> 26 <tr> 27 <td colspan="2">a</td> 28 <td rowspan="2">b</td> 29 </tr> 30 <tr> 31 <td rowspan="2">c</td> 32 <td></td> 33 </tr> 34 <tr> 35 <td colspan="2">d</td> 36 </tr> 37 38 </table> 39 </body>
table

運行效果

技術分享圖片

<body>
<h3>表格</h3>
<table border="1"  cellpadding="10" cellspacing="0">
<!--cellpadding內容的距離邊距,cellspacing間距間距為0時只有一條線顯示-->
<caption>我的表格</caption>
    <tr>
        <th colspan="2" rowspan="2">表格1</th>
        <th >表格2</th>        
    </tr>
    <tr>
        <td>表格4</td>    
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<br>
<br>
<table border="1" cellspacing="0" bgcolor="green" width="300" height="300">
    <tr>
        <td colspan="2">a</td>
        <td rowspan="2">b</td>    
    </tr>
    <tr>
        <td rowspan="2">c</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2">d</td>
    </tr>
    
</tabl運行效果    

組合標簽表格table