HTML <table>标签,定义表格

<table>标签

table为块级元素,可以用来定义HTML文档中的表格。

提示:通常情况下,table定义的表格虽然会按表格的格式来排列分布,但默认样式是没有边框的,比如下方的这个简单表格示例:

pythonHTML
CSSJavaScript

提示:如果需要为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常见属性表

属性描述
borderpx像素值设置表格边框及边框宽度
cellpaddingpx像素值或百分比值%设置单元格的内边距,即单元格内容与单元格边框的距离。
cellspacingpx像素值或百分比%设置单元格之间的空白
widthpx像素值或百分比%设置表格宽度
summary文本内容定义表格摘要
rulesnone、groups、rows、cols、all设置内侧边框的可见性
framevoid、above、below、hsides、lhs、rhs、vsides、box、border设置外侧边框的可见性

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.