如何在 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>
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP