大超教你建网站:NO.6 网页中的表格是怎么来的

上篇讲了CSS,知道CSS是用来控制HTML元素的表现样式的。今天就来实践一下,相信你经常会在网页里看到表格,看CSS如何来控制表格元素(是表格的壳,是表格内部的行,是表格中的单元格,代码是这样写的:

我的第一个表格

里面,标签又包含在里面。也就是说表格要先有一个外壳,然后需要在里面放进去行,再在行里面放进去单元格,最后在单元格里面放内容。上面的代码中有两组,说明是两行,每行里面又有两组,说明每行有两个单元格,也就是两列,这就形成一个两行两列的表格了。

表格的属性

常用的有以下几个:

width:宽度

height:高度

border:边框宽度

cellspacing:单元格之间的间隔

cellpadding:单元格内部文字与单元格表框的间隔

如何用CSS控制表格

如果你想控制表格的宽度,代码就是table 。如果你想控制表格的边框宽度就是table 。甚至还可以加上边框颜色table ,“solid”是实线的意思,当然还有虚线。

在CSS里面,直接给table这个元素定义样式时,网页内所有的table都会变成你所定义的样子。人人都希望个性化,表格也一样,单独把某个表格设置一种样式时怎么办呢?这就用到自定义样式,如果你想给某个table单独设置一种样式,你先要给样式起个名字,比如:gexing,在CSS里面是这样写的“.gexing”,然后在table里面加个class:,哪个表格想用这个样式就在哪个表格里加上这个class,可以重复使用。

不过看着上面这个表格有点难看啊,我在网上看到的表格都是细细的边框,你这个表格的边框怎么还有两条线?这个问题是个好问题,你说的是不是下图的最后一个?

这个就当作业吧,看看你能不能做出来。如果做不出来,可以关注“大超小志”发送“大超教你建网站6”收取本节课全部代码,有不懂的可以在公众号留言。

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

扫码关注云+社区

领取腾讯云代金券