当前位置：首页 > 前端开发 > 正文

HTML表格尺寸设置方法全解析，究竟如何精确定义表格大小？

admin
前端开发
2025-09-12
6

在HTML中定义表格的大小可以通过多种方式实现，包括设置表格的宽度、高度以及单元格的宽度、高度等,以下是一些常用的方法：

使用CSS定义表格大小

使用CSS是定义表格大小最灵活的方法之一,以下是一些常用的CSS属性：

width: 设置表格的宽度。
height: 设置表格的高度。
bordercollapse: 控制表格边框的合并方式。
tablelayout: 控制表格布局的方式。

示例：

<!DOCTYPE html> <html> <head> <style> table { width: 50%; height: 200px; bordercollapse: collapse; } th, td { border: 1px solid black; padding: 8px; textalign: left; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </body> </html>

使用HTML的width和height属性

在HTML中，你可以直接在<table>标签中使用width和height属性来设置表格的宽度和高度。

示例：

<!DOCTYPE html> <html> <head> </head> <body> <table width="50%" height="200px"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </body> </html>

使用单元格属性

在HTML中，你可以使用<th>和<td>标签的width和height属性来设置单元格的宽度和高度。

示例：

<!DOCTYPE html> <html> <head> </head> <body> <table> <tr> <th width="50%">Header 1</th> <th width="50%">Header 2</th> </tr> <tr> <td height="100px">Row 1, Cell 1</td> <td height="100px">Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </body> </html>

使用百分比

你可以使用百分比来设置表格和单元格的大小,这样表格的大小将根据其父元素的大小进行调整。

示例：

<!DOCTYPE html> <html> <head> <style> table { width: 100%; height: 200px; bordercollapse: collapse; } th, td { border: 1px solid black; padding: 8px; textalign: left; } </style> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> </body> </html>