HTML <table>标签,定义表格
<table>标签
table为块级元素,可以用来定义HTML文档中的表格。
提示:通常情况下,table定义的表格虽然会按表格的格式来排列分布,但默认样式是没有边框的,比如下方的这个简单表格示例:
python | HTML |
CSS | JavaScript |
提示:如果需要为table元素定义的表格设置边框,则可以使用border属性,注意,不是style属性中的border,而是table元素的border属性,二者有所不同,具体可见下方的实例代码。
table元素实例代码,及在线编辑器
<table border='1'>
<tr><td>苹果</td><td>香蕉</td><td>芭乐</td></tr>
<tr><td>橘子</td><td>芒果</td><td>葡萄</td></tr>
</table>
<br><br>
<table style='border:1px solid black;'>
<tr><td>樱桃</td><td>柚子</td><td>西瓜</td></tr>
<tr><td>柠檬</td><td>荔枝</td><td>甘蔗</td></tr>
</table>
实例代码解析
如上代码,tr元素用来定义表格的行,td则用来定义单元格。
table常见属性表
属性 | 值 | 描述 |
---|---|---|
border | px像素值 | 设置表格边框及边框宽度 |
cellpadding | px像素值或百分比值% | 设置单元格的内边距,即单元格内容与单元格边框的距离。 |
cellspacing | px像素值或百分比% | 设置单元格之间的空白 |
width | px像素值或百分比% | 设置表格宽度 |
summary | 文本内容 | 定义表格摘要 |
rules | none、groups、rows、cols、all | 设置内侧边框的可见性 |
frame | void、above、below、hsides、lhs、rhs、vsides、box、border | 设置外侧边框的可见性 |