我们使用内联样式属性，在HTML中设置表格的宽度。该属性在HTML的<table>标签内使用，使用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>
以上就是如何在HTML中设置表格宽度？的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
