前端学习必看之table表格详解,看了这些就够了

各位读者大家好,我是自学代码的小张,在这里与大家分享自学经验和一些建议,专攻html,div+css,javascript,jquery,ajax,java,php,还有一其它的一些前端框架。小张也是自学,有不足的地方还望大家不吝赐教~~感谢支持!

从13年开始接触前端,最先接触的布局表格,表格灵活性,加载速度都不如

灵活,但是对于萌新来说再定位某些,例如div里面套文字,而刚接触html+css又不懂得那么多使用,

,或者display:block来定位,最先想到的就是表格定位文字,可能达不到想要的效果,但是也差不了许多,但是美观上总会差那么一点。

表格标签成对使用,内嵌标签有表格内列标签,单元格标签,中的文字回成粗体更大的字体显示,来定义表格的标题。

主要属性有:

cellpadding="0" 这个属性主要控制单元格与单元格内容的距离,如果设置为0,单元格内容会紧贴单元格

cellspacing="0" 单元格与单元格之间的距离,设置为0之后单元格可以实现边框共用,但是不如css样式中的

border-collapse: collapse;让表格的边框共用,比如你已经设置了cellspacing="0",border="0",还是觉得边框粗,这时候这个属性会让整个表格的边框实现真正意义上的公用,让边框更细。

合并单元格Colspan横向 和 rowspan 纵向 属性来实现内容横跨多个行或列,注意的是当使用合并之后单元格并不是真正的合并,而是使用的单元格实现了跨行或者跨列显示,这时候会在原来的表格内多出一个单元格,而这个单元格会被挤出来,只需要查看代码找到他,直接删除相应的,一般挤出的单元格都会想右,纵向横向相同。

内容居中显示,水平align:center,垂直vertical:middle,

表格上方单独显示,也就是表头的意思,销售人员成绩考核

效果图

最后说说表格的宽高,宽高设定值首先要满足内容的宽高,其次以设定的值为准,最后如果都没有设置,然后正行的高以最高的单元格为准。

没有设置宽度时,平均分配,都设置了高,满足内容情况下取最高的。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190625A0MFWC00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券