课时41.表格的结构（了解）

Posted 2020-11-12 双双双双

• 我们打开上节课做出来的页面，然后点击鼠标右键“检查”

我们发现整个表格都是一个table标签，标题就是caption，而标题caption下面是<tbody>...</tbody>

我们上节课并没有写这个标签，所以事实证明我们上节课写的表格不是一个完整的表格，那么到底什么是一个完整的表格呢？我们这节课来探讨一下，但是这节知识只要求了解

• 新建一个html文档，ctrl+alt+n，命名为：25-表格的结构

1.由于表格中存储的数据比较复杂，为了方便管理和阅读以及提升语义，我们对表格中存储的数据进行分类

表格中存储的数据可以分为4类：

1. 表格的标题（如上节课的例子：今日小说排行榜）
2. 表格的表头信息：每一列的标题（如：上节课的例子：排名，关键字，趋势等）
3. 表格的主体信息（如上节课的例子：暴走大事件，62375，408831，贴吧链接等等）
4. 表格的页尾信息

如下图所示，

2.表格的完整结构

        

这是一个完整的表格的格式，

有一些注意点需要注意：

下面我们写一个程序

       

写完后用谷歌浏览器打开，一打开发现没有边框，如上图右边的样式

我们发现这个列表没有边框，我们为了让这个列表有边框，我使用快捷一点的方法来设置，<table border="1px">，这里写border=“1px”或者写border=“1”都是一样的，没有区别，

        

然后我们发现这个表格比较窄，然后我们给它调宽一点，用<table border="1px" width="500px">然后如下图所示

            

然后我们给它指定一个高度height="300px"，<table border="1px" width="500px" height="300px">

         

我们发现整个表格变高了，但是thead和tfoot要矮一些

2.如果指定了thead和tfoot，那么修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着表格的高度变化而变化，自己验证一下，将height设置为500px

         

但是一定要注意，像这样控制样式的，都是通过css来控制的，表头，表体，表尾，你想让它有多宽多高就可以设置多宽多高，这些东西了解一下就可以了。