本文详细介绍了如何手工设计不规则HTML表格，包括tr和td的使用，以及colspan和rowspan的技巧。同时，通过一个实际例子展示了如何用Div实现相同效果，并分享了在JavaScript中设置样式时避免错误的经验，强调了不应覆盖原有的样式而应直接修改特定属性。此外，还提供了关于JS事件处理中的问题和解决方法。
表格设计
<table></table>其中再往表格里深入的标签为<tr></tr>(tableRow)代表行，<td></td>(tableData)代表具体到某一个单元格。为了设计好看的表格，我们常用td标签里的colspan(跨列)，rowspan(跨行)来进行改变。有了这些基础知识能很快设计一个简单的表格。
但是如果设计不规则表格该如何设计呢？最近我做到练习题就遇到这样一个表格。总结了一种自己实用的手工过程来设计表格。
练习题如图所示。
- 先不管具体的宽高样式设置（后面通过css设置），先抽象的把它们看作大小相同的块，然后从上至下，从左至右，你设计的这个表格有几行不在同一水平的横线，几列不在同一数值水平的竖线。
如图。例题可以看出为5横5竖。
- 具体手工过程。
要设计5横5竖的图表。
(1)需要4(5-1)tr 4(5-1)td。（4*4表格）
(2)然后开始列表
我是标题 我是目录 A页面 B页面 blank 备注 作者
左上： 1 1 2 1 2 2 2 3 3 2 3 4 4 4
右下： 2 5 5 2 3 3 3 5 5 4 4 5 5 5
该列表建立的基本原则是：去每个独立的块进行数数，类似于鼠标选中界面上的某个东西，需要从左上拉到右下。
(3)计算
我是标题 我是目录 A页面 B页面 blank 备注 作者
左上：(1) 1 (2) 1 (2) 2 (2) 3 (3) 2 (3) 4 (4) 4
右下： 2 5 5 2 3 3 3 5 5 4 4 5 5 5
相减： 1 4 3 1 1 1 1 2 2 2 1 1 1 1
(4)设计
其中()括起来的就代表该元素在第几个tr标签中
相减的结果代表该需要跨x行/列，结果为1则不需要设置。
例如blank。该元素在第3个tr标签里，需要rowSpan = 2， colSpan = 2.
(5)写HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<span>我是标题</span></td>
</tr>
<tr>
<td rowspan="3">
<span>我是目录</span></td>
<td><span>A页面</span></td>
<td colspan="2"><span>B页面</span></td>
</tr>
<tr>
<td rowspan="2" colspan="2"></td>
<td>
<span>备注</span></td>
</tr>
<tr>
<td>
<span>作者</span></td>
</tr>
</table>
</body>
</html>
基本的框架出来了，宽高定位等不对，需要进行再设置。记住一个规则：宽度用百分比设置，高度用单位长度px进行设置。
首先是table标签里的设置，teble只能设置宽度，不可以设置高度，因为高度需要内容撑起来。设置width为100%取得窗口最大，缩放也是。
表格中各个表格体内的宽高设置，宽用百分比设置，高用元数据px设置，宽可以根据页面设定，高则必须由元素们撑起来，自己把握好元长度，进行扩增，宽都用百分数表示占比多少，高把握元长度，自己扩增。
在这提醒下各位，我为了方便写的行间样式，正确的方式应该是将样式提出去形成css表，形成HTML（结构）+CSS（样式）+JavaScript（行为）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td colspan="4" width="100%" height="50px">
<span style="font-size: 25px">我是标题</span></td>
</tr>
<tr>
<td rowspan="3" width="25%" height="300px">
<span style="position: relative;top: -140px">我是目录</span></td>
<td width="37.5%" height="25px"><span>A页面</span></td>
<td width="37.5%" height="25px" colspan="2"><span>B页面</span></td>
</tr>
<tr>
<td width="50%" height="275px" rowspan="2" colspan="2"></td>
<td width="25%" height="125px">
<span style="position: relative;top: -45px">备注</span></td>
</tr>
<tr>
<td width="25%" height="150px">
<span style="position: relative; top: -55px">作者</span></td>
</tr>
</table>
</body>
</html>
既然题目要求了需要用div也实现该效果，所以我们实现一下。其实div更符合网页设计里面元素的安排，因为div本来就是块元素，网页上所有的控件都是由div拼凑起来的。
需要注意的是div设置就需要注意哪个先哪个后了，其余和table一样。
其中先后顺序是由标准文档流决定的，从上至下，从左至右依次去数元素。
<body>
<div style="width: 99.25%;height: 50px;float: left;border: 1px solid black"><span>我是标题</span></div>
<div style="width: 10%;height: 300px;float: left;border: 1px solid black"><span>我是目录</span></div>
<div style="width: 45%;height: 25px;float: left;border: 1px solid black;" id="pageADiv">
<button id="pageAButton" style="outline: none">A页面</button></div>
<div style="width: 44%;height: 25px;float: left;border: 1px solid black"; id="pageBDiv">
<button id="pageBButton" style="outline: none">B页面</button></div>
<div style="width: 70%;height: 273px;float: left;border: 1px solid black" id="divBlank">
</div>
<div style="width: 19%;height: 125px;float: left;border: 1px solid black"><span>备注</span></div>
<div style="width: 19%;height: 146px;float: left;border: 1px solid black"><span>作者</span></div>
</body>
关于JS设置样式遇到的问题
还是上面那个例题，继续往下做事件部分，遇到一个很奇怪的问题，最终经过变量跟踪和网页查找才找出错误，现在此提醒铭记。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0px;
margin: 0px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div style="width: 99.25%;height: 50px;float: left;border: 1px solid black"><span>我是标题</span></div>
<div style="width: 10%;height: 300px;float: left;border: 1px solid black"><span>我是目录</span></div>
<div style="width: 45%;height: 25px;float: left;border: 1px solid black;" id="pageADiv">
<button id="pageAButton" style="outline: none">A页面</button></div>
<div style="width: 44%;height: 25px;float: left;border: 1px solid black"; id="pageBDiv">
<button id="pageBButton" style="outline: none">B页面</button></div>
<div style="width: 70%;height: 273px;float: left;border: 1px solid black" id="divBlank">
</div>
<div style="width: 19%;height: 125px;float: left;border: 1px solid black"><span>备注</span></div>
<div style="width: 19%;height: 146px;float: left;border: 1px solid black"><span>作者</span></div>
</body>
<script>
var pageWidth = document.getElementById("divBlank").offsetWidth; //查看控件的宽度
var pageHeight = document.getElementById("divBlank").offsetHeight; //查看空间的高度
var iframeBlank = document.createElement("iframe");
iframeBlank.setAttribute("id","iframeBlank");
iframeBlank.setAttribute("width", pageWidth);
iframeBlank.setAttribute("height", pageHeight);
document.getElementById("divBlank").append(iframeBlank);
$("#pageAButton").click(function(){
var pageADiv = document.getElementById("pageADiv");
// pageADiv.setAttribute("style","background-color: red");
//这样设置会使得页面变化很大，因为以前的样式没有了，进行重新排版。
//！！！不要这样设置增加样式！
pageADiv.style.backgroundColor="red";
iframeBlank.setAttribute("src", "a.html");
});
$("#pageBButton").click(function () {
var pageADiv = document.getElementById("pageADiv");
var pageBDiv = document.getElementById("pageBDiv");
pageADiv.style.backgroundColor="gray";
pageBDiv.style.backgroundColor="red";
iframeBlank.setAttribute("src", "b.html");
});
</script>
</html>
初学JS的我，得到了控件就直接设置它的属性。pageADiv.setAttribute("style","background-color: red");，这样是不对的，这样会覆盖（擦除）以前的样式，将会对你的页面造成无法想象的错误。应该使用pageADiv.style.backgroundColor="red";的方式，具体到某个特定的属性进行单独设置。
同时，这次教训提醒我，以后网页出问题找错误应该去浏览器，crtl+shift+c选定特定的某个控件上，查看它的基本HTML，CSS以及事件，然后进行调试，没达到你预想的效果说明某个环节出现问题了，就在浏览器上进行调试。
明白了上述的手工过程，可以尝试为自己做一个课程表。自己用自己的东西总会有一丢丢成就感。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
