1.表格的CSS属性

  1. 单元格间距：border-spacing:value;
    • 该属性必须给table添加，表示单元格边框之间的距离， 不可取负值
    • 前提是相邻单元格没有进行合并才能生效
  2. 合并相邻单元格边框：border-collapse:collapse;
    • 该属性必须给table添加
    • 细线表格就是这么来的
  3. 无内容时单元格隐藏：empty-cells:hide;
    • 定义当单元格无内容时，是否显示该单元格的边框区域 hide：隐藏
    • 前提是单元格不能合并
    • 添加给table和td都可以生效
  4. 表格标题位置：caption-side:top/bottom;
    • caption 标签的位置无法调整
  5. 显示单元格行和列的算法 table-layout:fixed;
    • 固定表格布局
  • 面试题：table之固定表格布局与自动表格布局
    • 在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。
    • 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。
    • 在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。

  • 表格添加边框 th,td{border:1px solid #000;}

    2.面试题：为什么使用div+css布局代替table布局

  • 可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新

  1. 符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性
  2. 布局精准，网站版面布局修改简单
  3. 加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）
  4. 节约站点所占的空间和站点的流量
  5. 用只包含结构化内容的HTML代替嵌套的标签，提高搜索引擎对网页的搜索效率

    3.相关练习

    1.png
    1.png

    4.补充知识-锚点

  • 1.当前页面的锚点跳转

    1.   `<a href="#box">点击的位置</a>`<br />        `<p id="box">跳转到的位置</p>`

  • 2.跳转到其他页面的锚点处

      `<a href="页面路径#para" target="_blank"></a>`
    • 需要在#前面添加其他页面的路径