html5网页设计表格布局
时间: 2024-01-30 12:11:13 浏览: 22
HTML5提供了多种方式来设计表格布局,以下是两种常用的方法:
1. 使用`<table>`标签:
```html
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
</table>
```
2. 使用CSS的`display: table`属性:
```html
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">标题1</div>
<div style="display: table-cell;">标题2</div>
<div style="display: table-cell;">标题3</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">内容1</div>
<div style="display: table-cell;">内容2</div>
<div style="display: table-cell;">内容3</div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;">内容4</div>
<div style="display: table-cell;">内容5</div>
<div style="display: table-cell;">内容6</div>
</div>
</div>
```