如何在 HTML 中建立表格行和列?


HTML 表格允許我們以行和列的形式在網頁上排列資料。

我們使用 <table> 標記在 HTML 中建立表格。表格由行和列組成。可以使用一個或多個 <th>、<tr> 和 <td> 元素設定表格標題、行、列和表格資料。

表格行由 <tr> 標記定義。對於表格行和列,我們分別使用 <tr>、<td> 標記在 <table>…</table> 標記內。

示例

以下是建立表格行和列的示例程式。

<!DOCTYPE html> <html> <style> table { border:1px solid black; padding: 10px; } th, td{ border:1px solid black; padding: 20px; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

示例

以下是建立表格行和列的另一個示例程式。

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; } </style> </head> <body> <h2>Adding table rows and colomns in HTML</h2> <table> <tr> <th>S.no</th> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>1</td> <td>Kohli</td> <td>34</td> <td>India</td> </tr> <tr> <td>2</td> <td>Rabada</td> <td>29</td> <td>South Africa</td> </tr> <tr> <td>3</td> <td>Starc</td> <td>33</td> <td>Australia</td> </tr> </table> </body> </html>

示例

以下是一個建立表格行和列的更多示例程式。

<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; } </style> </head> <body> <h2>Adding table rows and colomns in HTML</h2> <table style="width:80%"> <caption>Cricketers...</caption> <tr style="background-color: Mediumseagreen"> <th>S.no</th> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>1</td> <td>Kohli</td> <td>34</td> <td>India</td> </tr> <tr> <td>2</td> <td>Rabada</td> <td>29</td> <td>South Africa</td> </tr> <tr style="background-color: Mediumseagreen"> <td>3</td> <td>Starc</td> <td>33</td> <td>Australia</td> </tr> </table> </body> </html>

更新於:18-Nov-2022

21K+ 瀏覽

開啟您的 職業生涯

完成課程以獲得認證

開始
廣告
© . All rights reserved.