Day7 用HTML和CSS制作一个表格

在制作表格之前,要先来了解表格的HTML标签

表格必备HTML标签

要制作一个基本的表格,一定会使用到以下四个HTML标签

  1. table 是表格的外框
    制作表格的第一步就是新增一个table标签

  2. tr 代表表格中的列(table row),如果有三列,就要新增三个tr在table标签内

  3. th 代表表格中的表头(table header),会写在第一个tr标签内

  1. td 代表表格中的栏位 (table data),会写在tr的里面

设定表格上的CSS样式

  • 用border这个CSS属性来设定HTML元素的边框
table,th,td {
    border: 1px solid blue;
}

1px代表框线的粗细
solid代表框线为实心线
blue代表框线颜色

相关参考资料:
CSS values and units

border

在css写下对表格的样式设定後,会发现在浏览器上看到的画面和预期不一样

这是因为浏览器本身具有预设的样式,表格元素和元素之间有预设了间距
可以在style.css档案中 最上方贴上CSS Reset来改掉浏览器对於table的预设设定

将浏览器预设样式改掉後 就能看到如预期设定的画面

常用表格标签属性

  • colspan 设定储存格横跨几个栏位
 <th colspan="3">标题</th>

用colspan设定成横跨三个栏位

  • rowspan:设定储存格垂直跨几个栏位
<td rowspan="2">内容一</td>

用rowspan设定成垂直跨两个栏位

参考资料:
HTML table

以上为个人学习笔记整理
若有错误,欢迎指正


<<:  Day7 javascript 事件

>>:  33岁转职者的前端笔记-DAY 7 常见的卷轴 scollbar 做法

Day_17 iPerf3

系统安装好後总要测网速一下,了解点与点之间传输的品质与效率。一般测外网连线会用一些网站服务,例如广为...

企划实现(26)

在firebase制作登入系统 可以使用myRef.child("member"...

为了转生而点技能-javascript,day3(观念厘清-执行绪与同步、非同步

执行绪与同步、非同步 本篇是统整网路上各资源节录而成,如有观念错误的地方,还请大大们多多鞭策。 名词...

Day 4. Hashicorp Nomad: resources

Hashicorp Nomad: resources 在Kubernets的 Quality of ...

Day 28【Deploy NFT - Deploy the Lazy Mint in Website】Vitalik Buterin mining Ethereum

// Thats proof of work 【前言】 今天终於来到这个 Project 测试的最...