资讯专栏INFORMATION COLUMN

课时41.表格的结构(了解)

邹立鹏 / 1429人阅读

摘要:我们打开上节课做出来的页面,然后点击鼠标右键检查我们发现整个表格都是一个标签,标题就是,而标题下面是我们上节课并没有写这个标签,所以事实证明我们上节课写的表格不是一个完整的表格,那么到底什么是一个完整的表格呢我们这节课来探讨一下,但是这节知

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

我们发现整个表格都是一个table标签,标题就是caption,而标题caption下面是...

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

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

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

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

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

如下图所示,

2.表格的完整结构

        

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

有一些注意点需要注意:

下面我们写一个程序

       

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

我们发现这个列表没有边框,我们为了让这个列表有边框,我使用快捷一点的方法来设置,

,这里写border=“1px”或者写border=“1”都是一样的,没有区别,

        

然后我们发现这个表格比较窄,然后我们给它调宽一点,用

然后如下图所示

            

然后我们给它指定一个高度height="300px",

         

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

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

         

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2161.html

相关文章

  • 课时38.表格标签属性(了解

    摘要:宽度和高度的属性可以给标签和标签使用标签不能使用水平对齐和垂直对齐的属性其中水平对齐可以给标签和标签和标签使用垂直对齐只能给标签和标签使用外边距和内边距属性只能给标签使用补充上节课内容表格的宽度和高度默认是按照内容的尺寸来调整的也可以通过给1.宽度和高度的属性 可以给table标签和td标签使用(tr标签不能使用) 2.水平对齐和垂直对齐的属性 其中水平对齐可以给table标签和tr标签和t...

    callmewhy 评论0 收藏0
  • 课时39.细线表格(理解)

    摘要:请你设计出以下图片里的这个样式的表格步骤我先来制作一个两行两列的表格将里的设置成外边距是不见了,但是和我们想要完成的图片有一定的差距,我们发现这样做出来的图片好像是两条线合并到了一起一样,实际上确实是两条线合并到了一起的,它是将每个单元格 请你设计出以下图片里的这个样式的表格 步骤: 我先来制作一个两行两列的表格                            2.将tab...

    mist14 评论0 收藏0
  • 我是如何学习游戏引擎

    摘要:下面列举了游戏开发中常见的岗位以及两条常见的协作开发的流水线其实学习游戏引擎,前期对于任何岗位来说路线都是相似的,基本上就是一个熟悉基本操作理解基本概念拓展专业知识的过程。当然这不是绝对的,任何引擎的开始阶段和大成阶段都是相似的。 这是【游戏开发那些事】第51篇原创 前言:游戏引擎,表面...

    未东兴 评论0 收藏0
  • 课时40.表格其它标签(理解)

    利用我们表格标签来做一个案例: 通过这个案例来给大家介绍下表格标签中的其它标签 1.ctrl+alt+n新建一个文件,命名为24-表格标签的其它标签 然后我们在这个程序中输入代码,我们观察这个图片发现标题是h2,然后下面是一个表格标签,一共是六行六列,我们先做出来标题栏 出现这种样式,发现看不到边框,因为表格边框默认为0,并且图片中是一个细线表格,所以我们要按上节课学的来制作细线表格,我们...

    gxyz 评论0 收藏0
  • 课时43.表格练习

    摘要:这节课我们来练习几个样式的表格快捷键总结快速移动选中的代码,上下移动往上移动向上箭头往下移动向下箭头快速合并和展开代码合并和展开的是一个标签合并展开快速合并和展开代码合并和展开选中的所有标签合并展开快速新启一行回车这节课我们来练习几个样式的表格 1. 2. 3. 4. 快捷键总结 快速移动选中的代码,上下移动 往上移动:ctrl+shift+向上箭头 往下移动:ctrl+shi...

    TesterHome 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<