資料結構
網路
關係型資料庫管理系統
作業系統
Java
微軟 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>
現在，我們嘗試使用 style 屬性，將表格擴充套件到瀏覽器選項卡大小。
示例
以下是使用 style 屬性，將表格擴充套件到瀏覽器選項卡大小的示例程式。
<!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>
更新於： 21-10-2023
2.5 萬+
廣告