資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何設定 HTML 中的表格寬度？
我們使用行內樣式屬性來設定HTML中的表格寬度。該屬性在HTML <table> 標籤內使用，並使用CSS 屬性寬度來設定表格寬度。
語法
以下是如何在 HTML 中設定表格寬度的語法。
<table style="width: width value in percentage">… </table>
示例
以下是設定 HTML 中表格寬度的示例程式。
<!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: 50%"> <tr> <th>Name </th> <th>Job role</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
在上面的示例中，我們使用了 width=50%，它將在網頁上將我們的表格擴充套件到瀏覽器選項卡大小的 50%。
示例
以下是另一個如何在 HTML 中設定表格寬度的示例程式。
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; } </style> </head> <body> <table style="width:100%"> <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>babar azam</td> <td>34</td> <td>pakistan</td> </tr> <tr> <td>2</td> <td>Shami</td> <td>29</td> <td>India</td> </tr> <tr style="background-color: Mediumseagreen"> <td>3</td> <td>Cummins</td> <td>33</td> <td>Australia</td> </tr> </table> </body> </html>
現在我們嘗試使用樣式屬性將我們的表格擴充套件到我們的瀏覽器選項卡大小。
示例
以下是使用樣式屬性將我們的表格擴充套件到瀏覽器選項卡大小的示例程式。
<!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>Name </th> <th>Job role</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
更新於：2023-10-21
25K+ 瀏覽量
廣告