对HTML表格一些理解

最新推荐文章于 2024-04-19 20:39:07 发布

Bil!

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量208

点赞数 1

分类专栏： HTML和CSS

本文链接：https://blog.csdn.net/weixin_45045689/article/details/106721715

版权

HTML和CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.表格相关标签：

<table> 表格标签 <tr> 行标签 <td> 单元格标签

<th> 表头单元格标签 <thead> 表格头部区域标签

<tbody> 表格主体区域标签 <tfooter> 表格尾部区域标签

<caption> 表格的标题，位置要紧跟<table>标签之后

<thead> 、 <tbody> 、 <tfooter> 是仅仅为了增强语义化而已。在显示上，加了没没加效果一样。

<tr>、</tr> 表示行开始和行结束。有几个<tr> 表格就有几行。

2.表格的相关属性：

align 规定表格相对周围元素的对齐方式

border 规定表格单元是否拥有边框，默认为"" ，表示没有边框

cellpadding 规定单元边沿与其内容之间的空白，默认1像素

cellspacing 规定单元格之间的空白，默认2像素

width 规定表格的宽度

这五个属性，在DW的上也有。（填充指cellpadding ，间距指 cellspacing）

这五个属性，是只设置在<table>标签上的！

3.合并单元格：

rowspan 跨行合并

colspan 跨列合并

这两个属性只设置在 <td> 单元格标签上。

4.css表格

在<table>上设置的css样式：

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

border-collapse有属性值：

默认为separate ，如果设为 collapse 的话，相当于把单元格之间的空白设为零，单元格的边框粗细设为零。

border-spacing 和 cellspacing 的效果一样，一个是css样式，一个是html属性。

不过border-spacing 会覆盖 cellspacing 的。（渲染次序问题）

对<th> 、 <td>、<table> 的css设置：

border 边框

width 宽度

height 高度

text-align 内容水平对齐方式

vertical-align 垂直对齐方式

padding 表格内边距(和cellpadding 效果一样)

color 文本颜色

background-color 背景颜色

会发现没有margin ,因为<tr>的盒子模型为：

<td> 、 <th>的盒子模型为:

只有<table> 和 <caption> 有“完整的盒子模型”。

注意：

表格的宽高是十分严格的。如果在同一列内的<td> 的宽有不同的值，会统一取最大那个，那些设置宽高小的会被浏览器无视的。

比如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="1px">
    <tr>
      <td>我是td</td>
      <td style = "width: 100px;">我是td</td>
      <td>我是td</td>
    </tr>

    <tr>
      <td>我是td</td>
      <td style = "width: 200px;">我是td</td>
      <td>我是td</td>
    </tr>
  </table>
</body>

</html>

最后第二列的width 为 200px 的。

同样，td设了height ，那么同一行内的td 会取最大的那个 height 为整一行td 的 height 。

2.

a.如果table 没有设宽高，那么我们可以任意设 td 的宽高都可以。

b.如果table 设了宽度，那么我能设 td 的宽度时，整行 td 的宽度不可以超过 table 的宽度，否则设置无效。

c.如果table 设了高度，而我们的td 没有设高度，或设整列 td 的高度，少于这个高度时，那么没设高度的td

会平分多出来的高度，以至整个表格达到 table 设的高度值。

d.如果table设了高度，而我设整列 td 的高度大于这个值时，就会无视table设的高度了。

总结：

table 设的宽度是严格的，高度不是严格的。

3.

<td> 是 table-cell 类型的元素，可以在css 下的 display 看到。

如果新手，可以把它当作一种类 block-inline 元素来看待。

4.

还有一种表格嵌表格的情况。在Web1.0 的时候，用表格布局网页时常用。

5.

表格上的内容一定都在 <caption> 、 <th> 、 <td> 这3个标签里面的!!!

<table>标签的缺点：

1.服务器把代码加载到本地服务器的过程中，本来是加载一行执行一行，但是table标签是里面的东西全都下载完之后才会显示出来，那么如果图片很多的话就会导致网页一直加载不出来，除非所有的图片和内容都加载完。

2.Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)

3.Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)(这会限制你页面设计的自由性。)

4.table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

参考博客：
https://www.html5tricks.com/why-not-table-layout.html

https://blog.csdn.net/qq_37746973/article/details/80679242

Bil!

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对HTML表格一些理解

1.表格相关标签：<table> 表格标签 <tr> 行标签 <td> 单元格标签<th> 表头单元格标签 <thead> 表格头部区域标签<tbody> 表格主体区域标签<caption> 表格的标题，位置要紧跟<table>标签之后2.表格的相关属性：align 规定表格相对周围元素的对齐方式border 规定表格单元是否拥有边框，默认为""，...
复制链接

扫一扫