怎么制作一个HTML表格

HTML - 学习怎么做一个表格

表格在前端里是比较基础的，百米高楼平地起，所以我们更要掌握表格。

我们先看一下效果，表格包括表格标题、表头、表格内容、表格尾部内容，我们从头到尾看一下这个表格是怎么做出来的。

一：表格标签

table主要有以下属性：

table由tr和td标签实现单元格的内容实现

二：标题标签 caption

caption标签默认让标题在表格上面居中，不过没有加粗变黑效果，所以我们需要用一个标题标签实现这个效果。

三：表头标签 thead

thead标签也是默认让表头居中，并且有加粗变黑效果。不过要注意一点的是，单元格不是用td标签，而是用th标签，让表头加黑变粗的也是这个th标签的原因。

四：表格体标签 tbody

表格体可以用align属性设置所有内容居中,用tr和td标签实现内容展现，表格主要是由表格体来展示。

五：表格尾部标签 tfoot

表格尾部一般用来对表格补充说明使用，在实际应用场景中较少出现，不过我们也可以了解一下，并且我们这里还合并了单元格，下一篇文章再详细展开合并单元格怎么做。

好了，HTML的表格学习到此就结束啦，希望看完你也掌握了怎么制作一个HTML表格。

怎么制作一个HTML表格相关推荐

html语言制作带样式的表格,html制作一个复杂表格 html5/CSS3做一个表格
table td{width: 100px;padding: 5px;}DataDataDataDataDataDataDataDataDataDataDataDataDataDataData 用HT ...
freecodecamp//响应式 Web 设计//项目实战——2制作一个调查表格（Build a Survey Form）
文章目录一.项目的具体要求见: 二.我的代码详情在: 三.本项目中发现的不足之处四.感受一.项目的具体要求见: https://learn.freecodecamp.one/responsive ...
使用 ale.js 制作一个小而美的表格编辑器（2）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（3）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
制作一个表格，显示班级的学生信息。
编程练习制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
使用 ale.js 制作一个小而美的表格编辑器（4）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
jsp循环输出表格_使用 ale.js 制作一个小而美的表格编辑器（1）
今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器,首先先上 gif: 是不是还是有一点非常 cool 的感觉的?那么我们现在开始吧! 这是我们这篇文章结束后完成的效果(如果想继续完成请访 ...
python调用报表制作工具_Python如何使用xlwt制作一个表格
Python如何使用xlwt制作一个表格发布时间:2020-11-06 15:23:50 来源:亿速云阅读:59 Python如何使用xlwt制作一个表格?很多新手对此不是很清楚,为了帮助大家解决 ...

怎么制作一个HTML表格

HTML - 学习怎么做一个表格

怎么制作一个HTML表格相关推荐

最新文章

热门文章