html好看的表格模板（用html做个简单表格）

：暂无数据 2026-07-21 07:20:01 ：0

各位老铁们，大家好，今天由我来为大家分享html好看的表格模板，以及用html做个简单表格的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！

本文目录

用html做个简单表格
求一段网页表格的html代码.- 简单-.
能帮我做一份用HTML+CSS样式的学生成绩表格，要求美观大方谢谢了、
如何用html，css建一个美观的表格

用html做个简单表格

回答

稍等

HTML中制作表格有两种方法：

（1）先把最原始的表格画出来，每一个都是单个单元格，然后再根据要求进行行合并或列合并，有的表格需要行列都合并，则也是把它分为两步做，先合并行再合并列（或者先合并列再合并行），若进行了colspan和rowspan的合并，则将之后同一行或同一列的单元格删除，但这种方法较麻烦，容易搞混。

（2）直接根据最终要生成的表格来操作，将每个合并的单元格看做一个小的单元格，不再将它拆分，然后一行一行的写表格，遇到合并的单元格直接写出colspan或rowspan，下面若遇到已经用过的合并的单元格，则不再将其算到内，只看还剩多少单元格。这种方法一行一行的写，不用再去删单元格，比较清晰。

以下为制作的一个简单表格及其代码：

更多3条

《center》
《table》
《caption style="text-decoration:underline;font-weight:bold;"》请留下个人资料《/caption》
《tr》《td》姓名：《/td》《td》《input type="text"》《/td》《/tr》
《tr》《td》电话：《/td》《td》《input type="text"》《/td》《/tr》
《tr》《td》E-mail：《/td》《td》《input type="text"》《/td》《/tr》
《tr》《td》性别：《/td》《td》《input type="radio" checked》男　《input type="radio"》女《/td》《/tr》
《tr》《td》年龄：《/td》《td》《select》《option》20以下《/option》《/select》《/td》《/tr》
《tr》《td》留言版：《/td》《td》《textarea》《/textarea》《/td》《/tr》
《tr》《td》您的爱好：《/td》《td》《input type="checkbox"》运动　《input type="checkbox"》阅读《br》《input type="checkbox"》听音乐　《input type="checkbox"》旅游《/td》《/tr》
《/table》
《input type="submit" value="提交"》　《input type="reset" value="全部重写"》
《/center》

《div》标题内容:《input type="text" id="a"》《/div》《div》标题格式:《input type="text" id="b"》《/div》《div》标题大小:《input type="text" id="c"》《/div》《button type="button" id="d"》预览《/button》《div id="e"》《/div》
// 绑定 id 为 d 的按钮的点击事件document.getElementById("d").onclick = function () { // 获取 id 为 a 的输入框的值 var a = "标题内容:" + document.getElementById("a").value; // 获取 id 为 b 的输入框的值 var b = "标题格式:" + document.getElementById("b").value; // 获取 id 为 c 的输入框的值 var c = "标题大小:" + document.getElementById("c").value; // 将获取到的值加入到 id 为 e 的元素里面 document.getElementById("e").innerHTML = a + "" + b + "" + c;}