【JavaWeb新手入门】开启篇之HTML表格

HTML表格

目录

1.表格
2.表格语义化
3.两个属性

表格

1.1表格简介

• 表格布局方式已经被舍弃，现在用的是“浮动布局”和“定位布局”（CSS部分的内容）
• 表格一般用于展示数据

1.2基本结构

• 在HTML中，一个表格一般会由以下3个部分组成

  表格	table
  行	tr
  单元格	td

• 默认情况下，表格是没有边框的。其中，表格的边框、颜色、大小都是由CSS控制

1.3完整结构

• 表格完整结构包括： 表格标题caption、表格头部thead、表格主体tbody、表格脚注tfoot， 四部分组成。

• 语法

  • <table>
       <caption>表格标题</caption>
       <thead>
        <tr>
            <td>单元格1</td>
         <td>单元格2</td>
        </tr>
        </thead>
    <tobody>
     <tr>
     <td>单元格3</td>
     <td>单元格4</td>
     </tr>
    </tbody>
    <tfoot>
    </tfoot>
    </table>
    

• th和td的区别
• 显示上：浏览器会以“粗体”和“居中”来显示th标签中的内 容，但是td标签不会；
• 语义上：th标签用于表头，而td标签用于表行

1.4基本属性

注意点：

1. *<*tanle>元素的 border属性可以控制表格边 框， 但 border值的大小， 并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度， 这个问题如何解决? —— 后期靠CSS控制。
2. 给某个 th或td设置了宽度之后， 他们所在的那一列的宽度就确定了。
3. 给某个 th或td设置了高度之后， 他们所在的那一行的高度就确定了。

1.5常用标签

注意点：
1. 不要用*<*br>来增加文本之间的行间隔， 应使后面即将学到的 CSS margin 属性，
2. *<*hr>的语义是分隔， 如果不想要语义， 只是想画一条水平线， 那么应当使用CSS 完成。

表格语义化

• thead、tbody、tfoot、表格划分为3部分：表头、表身、表脚。有了这3个标签，表格语义更加良好，结构更清晰，也更具有可读性和可维护性。

thead、tbody、tfoot三个标签的作用：让你的代码更具有逻辑性，并且还可以很好地结合CSS来分块控制样式

两个属性

• rowspan、colspan

  3.1rowspan合并行

  • 我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并
  • 语法

    • <td rowspan = "跨越的行数"></td>
      

  3.2colspan合并列

  • 我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并

  • 语法

    • <td colspan = "跨越的列数"></td>
      

    ---