HTML 表格

HTML 表格

表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割為若干單元格(由 <td> 標籤定義)。字母 td 指表格資料(table data),即資料單元格的內容。資料儲存格可以包含文字、圖片、清單、段落、表單、水平線、表格等等。

下面是一個範例:

<html>
    <head>
    <meta charset="utf-8"> 
    <title>Table in html</title>
    </head>
    <body>
        <p>水平表头</p>
        <table border="1">
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
         </tr>
         <tr>
            <td>zdd</td>
            <td>30</td>
            <td>male</td>
         </tr>
         </table>
         
         <p>垂直表头</p>
         <table border="1">
         <tr>
            <th>Name</th>
            <td>autumn</td>
         </tr>
         <tr>
            <th>Age</th>
            <td>30</td>
         </tr>
         <tr>
            <th>Gender</th>
            <td>famale</td>
         </tr>
        </table>
    </body>
</html>

試試看

#無邊框表格

##如果在定義表格時,沒有指定border屬性,那麼表格就沒有邊框

<table>   <tr><td>zdd< ;/td><td>30</td></tr>
   <tr><td>ddz</td><td>27<td>ddz</td><td>27</td></tr>< #</table>


#空白單元格如果沒有為單元格指定內容,那麼單元格將是空的,且沒有邊框


如果解決呢?方法是為空的儲存格加上空格,由於html忽略多餘的空格,所以我們不能直接加空格,而要加   nbsp表示non-breaking space。


<table border="1">

   <tr><td>zdd</td><td>30</td></ tr>   <tr><td> </td>20</tr>
</table>












################################################################################################################# #有標題的表格##################使用caption屬性,但是好像標題中不能有空格,否則顯示的時候會換行!太扯了吧? ###############<table border="1">###<caption>我的表格</caption>###   <tr><td>>###   <tr><td> ;zdd</td><td>30</td></tr>###   <tr><td> </td><td><td> </td><td>20< tr>###</table>################跨行或跨列表格##############用colspan跨行## #######<table border="1">###<tr><th>姓名</th><th colspan="2">電話</th> </tr>###<tr><td>Bill Gates</td><td>555 77 854</td><td>555 77 855< ##</table>#######

用rowspan跨列

<table border="1">
<tr><th>姓名</th><td> Bill Gates</td></tr>
<tr><th rowspan="2">電話</th><td>555 77 854</td></tr>555 77 854</td></tr>
<tr><td>555 77 855</td></tr>
</table>

#HTML 表格表頭

表格的表頭使用<th> 標籤進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文字:

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cellcell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</ td>
<td>row 2, cell 2</td>
</tr>
</table>


##
繼續學習
||
<html> <head> <meta charset="utf-8"> <title>php.cn</title> </head> <body> <h4>背景颜色:</h4> <table border="1" bgcolor="yellow"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Tom</td> </tr> </table> </body> </html>