HTML表格标签

表格标签: <table></table>

表格标签的作用:用来给一堆数据添加表格语义
表格标签是一种数据的展现形式,当数据量特别大的时候,表格的展现形式很清楚。

表格标签格式:
<table>
<tr>
<td>
</td>
</tr>
</table>

tr:表格的一行
td:表格的一行中的一个单元格

两行三列
2tr + 3td

表格标签边框属性:<table border="3"></table>
默认值为0

Paste_Image.png
Paste_Image.png

表格标签属性:
-宽度width和高度height :用于 table和td,tr不能用
默认是按照内容调整,可通过 width / height 改变
<table border="1" width="500px" height="500px" >
<td width="150px" height="50px">1.1</td>

-水平对齐和垂直对齐
水平align:用于 table、td、tr
<table border="1" width="500px" height="500px" align="center"> 整个表格居中
<tr align="center"> 这一行内容居中

垂直:用于 tr、td
<tr align="bottom">

-外边距和内边距:只能用于table
外边距cellspacing:单元格和单元格之间的距离
内边距cellpadding:文字、图片到内边框的距离

细线表格:

Paste_Image.png
Paste_Image.png

表格中添加图片:

Paste_Image.png
Paste_Image.png
Paste_Image.png

caption标签:专门用来设置表格标题的标签,要放置在 table 标签里面,否则无效,并且要放置在 table 开始标签后面

th 标签:表格标签提供的一个专门用来存储每一列的标题的标签,标题会自动加粗、自动居中
td存储数据、th存储标题

Paste_Image.png
Paste_Image.png

单元格合并:
-水平方向合并
可以给td标签添加一个 colspan 属性来指定把一个单元格当作多个单元格来看待,把当前单元格当作两个单元格来看待,但是会多出一些单元格,所以就要删除一些单元格
单元格永远是向后、向下合并

Paste_Image.png
Paste_Image.png

-垂直方向合并 rowspan
垂直方向同理

Paste_Image.png
Paste_Image.png

推荐阅读更多精彩内容

  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 1,453评论 1 8
  • ## HTML基础-列表标签/表格标签 # 列表标签(无序列表/有序列表/定义列表) # 表格标签 # 单元格合并...
    KsKison阅读 440评论 0 0
  • img标签: img标签中的img其实是英文image的缩写,所以img标签的作用, 就是告诉浏览器我们需要显示一...
    佩佩216阅读 782评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,155评论 1 92
  • 之前看到一段很有意思的话,于是我就记下来了,也给你们分享一下。具体出处不记得了,这段话是这样说的:【每天起床冲完澡...
    钟小阅读 317评论 0 1
  • 时间打败了爱情,我走过你来时的路,拥抱着希望和太阳。学会了忘记,忘记曾经,学会了等待,等待未来。 如果再来一...
    呼叫史迪仔阅读 97评论 0 0