HTML table 标签

🌙
手机阅读
本文目录结构
axihe

HTML <table> 标签功能

绘制表格使用;如果是做后台管理的用户列表等类似 Excel 功能,这个标签是最佳的选择

  • <table> 标签定义 HTML 表格

  • 一个 HTML 表格包括 <table> 元素,一个或多个 <tr><th> 以及 <td> 元素。

  • <tr> 元素定义表格行

  • <th> 元素定义表头

  • <td> 元素定义表格单元

更复杂的 HTML 表格也可能包括

  • <caption>
  • <col>
  • <colgroup>
  • <thead>
  • <tfoot>
  • <tbody>

HTML <table> 标签用法

一个简单的 HTML 表格,包含两列两行:

<table border="1">
    <tr>
        <th>网站名</th>
        <th>网址</th>
    </tr>
    <tr>
        <td>阿西河前端教程</td>
        <td>www.axihe.com</td>
    </tr>
</table>

HTML <table> 标签演示

网站名网址
阿西河前端教程www.axihe.com


浏览器支持

所有主流浏览器都支持 <table> 标签。


注意事项

虽然现在 DIV+CSS 布局非常流行,是取代 table 布局的好选择;

但是遇到 table 相关的东西,还是使用table标签更佳,请根据实际场景进行选择


HTML4 与 HTML5 之间的差异

在 HTML5 中,仅支持 “border” 属性,并且只允许使用值 “1” 或 ““。


属性

属性描述
alignleft
center
right
HTML5 不支持。HTML4 已废弃。 规定表格相对周围元素的对齐方式。
bgcolorrgb(x,x,x)
#xxxxxx
colorname
HTML5 不支持。HTML4 已废弃。 规定表格的背景颜色。
border1
””
规定表格单元是否拥有边框。
cellpaddingpixelsHTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacingpixelsHTML5 不支持。规定单元格之间的空白。
framevoid
above
below
hsides
lhs
rhs
vsides
box
border
HTML5 不支持。规定外侧边框的哪个部分是可见的。
rulesnone
groups
rows
cols
all
HTML5 不支持。规定内侧边框的哪个部分是可见的。
summarytextHTML5 不支持。规定表格的摘要。
widthpixels
%
HTML5 不支持。规定表格的宽度。

全局属性

<table> 标签支持 HTML 全局属性


事件属性

<table> 标签支持 HTML 事件属性



AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang