表格就是显示表格数据用的东西,一个表格可能有很多行 .. 每行内容又会分成好多个单元格.. 每个小格子里可以填写一些内容 ..它跟我们现实生活用的表格长的差不多 ..
不过如果你想在网页上显示一个表格,你需要使用一些特定的标记来表示表格里的不同的部分 .. 因为浏览器只认识使用这些标记制作的表格 ...
创建一个表格 .. 先用一组 table 标签 .. table 就是表格的意思 .. 在它里面可以分成几个部分,有表格的头部,主体内容,还有表格的底部 ..
你不一定需要在一个表格里添加所有这些东西,一般只需要一个主体部分就行了 .. 表格的头部可以使用一个 thead 标签包装一下.. t 就是 table ,head 表示 header ,意思就是表格的头部 ..
表格里的每行内容都需要使用一个 tr 标签标记一下 .. 它表示 table row ,就是表格里的一行 .. 每行内容里面可以包含一些单元格 .. 在表格头部里的单元格需要使用 th 标签包装一下 .. table header cell ...
一个是课程 .. 再添加一个表格头部的单元格 .. 时长 ..
表格的主体部分可以放到一组 tbody 标签里面 .. 每行内容仍然需要使用一组 tr 标签 .. 主体部分的单元格可以使用 td 这个标签 .. 这个 td 应该表示的是 table data .. 表格里的数据 ..
一行内容有两个单元格 .. 先是表示课程名字的数据 ... 然后是表示课程时长的数据 .. 再添加两行内容 .. 修改一下单元格里的内容 ..
表格的底部可以再用一个 tfoot 标签 .. 同样每行内容的周围要用一组 tr 标签 .. 这行内容里面,我们只放一个单元格 .. 它里面的东西可能是一个分页器 .. 或者其它的东西 ..
这个单元格我们可以让它占两列显示 .. 我们的表格一共就两列内容, 一列课程,一列表示课程的时长 .. 所以让这个单元格占两列就相当于是让它横跨整个表格 .. 在这个 td 标签里面,可以添加一个 colspan 属性 .. 它的值就是这个单元格占用的列数 .. 这里把它设置成 2 ..
现在你看到的就是一个基本的表格 ... 第一行是表头 .. 下面三行是表格的主体 .. 最后一行是表格的底部 ...
默认浏览器也没给它什么样式 .. 我们以后可以使用 css 给表格添加一些样式 .. 比如表格的宽度,边框 .. 每行内容的背景颜色,单元格里面的边距等等 ...