我们使用内联样式属性,在HTML中设置表格的宽度。该属性在HTML的
标签内使用,使用CSS属性width来设置表格的宽度。语法
以下是在HTML中设置表格宽度的语法。
<table style="width: width value in percentage">… </table>
Example
的中文翻译为:示例
以下是在 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%。
立即学习“前端免费学习笔记(深入)”;
Example
的中文翻译为:示例
下面是另一个在 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 属性将表格扩展到浏览器选项卡大小。
Example
的中文翻译为:示例
以下是使用 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>