环境Windows 工具VScode 浏览器Edge
常用表格及属性
| 表格 | 定义 |
|---|---|
<table> | 定义表格 |
<caption> | 定义表格标题 |
<th> | 定义表格的表头 |
<tr> | 定义表格的行 |
<td> | 定义表格的单元 |
<thead> | 定义表格的页眉 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
<col> | 定义表格的列属性 |
tips
- table的border属性：设为非0正数则可以看见边框，且边框粗细与数字有关
- 如果有空白单元格，则不写入内容即可
- 如果给表格加标题可以使用table标签前加p标签或者在table标签内使用
<caption> - 在表格中插入列表也是使用ul标签和li标签结合
- 当要调整表格单元格的文字与边框的边距可以使用table标签的cellpadding属性
- 调整单元格的间距时则使用table标签的cellspacing属性
- 调整表格的颜色使用table标签的bgcolor属性
- 在表格中添加图片使用的时background属性，注意，要搭配好表格大小和图片，否则表格太小无法显示全部图片
- 在表格中若需要跨行使用td标签的colspan，跨列使用rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<title>your title</title>
<meta charset="UTF-8">
</head>
<body>
<p>p标题</p>
<table border="1">
<caption>题体</caption>
<tr>
<th>单元表头</th>
<th>单元表头</th>
<th>单元表头</th>
</tr>
<tr>
<td>单元</td>
<td></td><!--空白表格-->
<td>单元</td>
</tr>
<tr>
<td>
<ul>
<li>麦当劳</li>
<li>肯德基</li>
<li>汉堡王</li>
</ul>
</td>
<td>我都要</td>
<td>吃</td>
</tr>
<br/>
</table>
<br/>
<!--查看新表与旧表可看到单元格内文字与边框边距--> <table border="1" cellspacing = "10px"> <tr>
<td>单元</td>
<td></td><!--空白表格-->
<td>单元</td>
</tr>
<tr>
<td>单元</td>
<td>单元</td>
<td>单元</td>
</tr>
<tr>
<td>单元</td>
<td colspan = "2">单元</td>
</tr>
</table>
</body>
</html>
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
