html不对齐、不规则表格的实现
做html页面的时候，要做一个单元格边线不对齐的表格，百度没找到相关的资料，（可能因为我不懂描述我的问题~）后面了解到table标签有个table-layout:fixed;的样式，激发了我的灵感，先看效果图。
一、效果图
一时间没找到什么好的例子，就随便做了一个，内容重复是因为不知道写什么了，敷衍一下。“不对齐”表现在每个tr标签内的td数量可以不一致，宽高也可以不同。
二、代码实现
先举个小例子
html代码
<table border="1px" cellspacing="0">
<tr>
<td colspan="5">书 名:第一行代码——Android（第2版）</td>
<td colspan="2">作 者:郭霖</td>
</tr>
</table>
css代码(美化方面的css我就不放上来了，我就是给table设置了30%的宽，全部td设置了42px的height)
table{
table-layout:fixed;
}
效果图
可以看到，表格按照td标签的colspan属性按比例分表格的宽（colspan 属性原意是规定单元格可横跨的列数），有人就说了，在css中将设置第一个td的width：50%，第一个td的width：20%，效果一样的，而且table标签还不用设置table-layout:fixed;样式。
确实，对于只是想对一行里的td设置宽度，我也会用百分比，但是这里我只是想说明td标签的colspan:””属性配合table标签的table-layout:fixed;样式，可以对td实现按比例分栏效果，为了后面讲的内容做铺垫（后面其实也没有难的东西）。
再举个小例子
html代码
<table border="1px" cellspacing="0" width="30%" >
<tr>
<td colspan="17">书 名:第一行代码——Android（第2版）</td>
<td colspan="7">作 者:郭霖</td>
</tr>
<tr>
<td colspan="10">出版社:人民邮电出版社</td>
<td colspan="6">用 纸:胶版纸</td>
<td colspan="8">出版时间:2016-11 </td>
</tr>
</table>
css同上，只是给table添加了table-layout:fixed;样式。
效果图
可以看到，表格的第一行有2个单元格，第一行有3个单元格，并且第一行的单元格并没有跟第二行的单元格对齐！这在用百分比来设置td的宽度的情况下是实现不了的。
<table border="1px" cellspacing="0" width="30%" >
<tr>
<td colspan="2" style="width: 20%">书 名:第一行代码——Android（第2版）</td>
<td style="width: 7%">作 者:郭霖</td>
</tr>
<tr>
<td style="width: 16%">出版社:人民邮电出版社</td>
<td style="width: 10%">用 纸:胶版纸</td>
<td style="width: 11%">出版时间:2016-11 </td>
</tr>
</table>
无css，也可给table添加table-layout:fixed;不过添加该样式后要重新调td的宽度，可自行尝试。
效果图
对比上面一个，这个表格的“书名”这一单元格右侧必须与 “用纸”这一单元格右侧对齐，即使“书名”这一单元格的width并不等于“出版社”和“用纸”单元格width的和。
三、总结
综上，我想表达的就是给table加上table-layout:fixed;样式后，每一个tr标签里的td标签可以用colspan属性来实现分栏，并且可以放自由数量的td，但是要确保每个tr标签里的的td标签“col”数加起来相等，计算规则：加colspan属性，colspan属性是多少“col”就是多少；不加colspan属性，“col”为1。第一个小例子中，第一个tr的col为17+7=24，第一个tr的col为10+6+8=24，两者相等。24栏也是我常用的栏数，推荐分为24栏。
最后是第一个效果图的完整的源代码，给有需要的人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body div table{
margin: 100px auto;
}
body div table td{
color: #888;
height: 42px;
padding-left: 5px;
}
img{
width: 100%;
height: 600%;
}
table{
table-layout: fixed;
width:40%;
}
</style>
</head>
<body>
<div>
<table border="1px" cellspacing="0">
<tr>
<td colspan="12">书 名:第一行代码——Android（第2版）</td>
<td colspan="12">类 别:计算机/软件开发/Android开发</td>
</tr>
<tr>
<td colspan="9">出版社:人民邮电出版社</td>
<td colspan="7">用 纸:胶版纸</td>
<td colspan="8">出版时间:2016-11 </td>
</tr>
<tr>
<td colspan="10">ISBN:978-7-115-43978-9</td>
<td colspan="5">装 帧:平装</td>
<td colspan="9" rowspan="6"><img src="https://dwz.cn/hQGieAIw"></td>
</tr>
<tr>
<td colspan="15">类 别:计算机/软件开发/Android开发</td>
</tr>
<tr>
<td colspan="4">开 本:16</td>
<td colspan="5">页 数:580</td>
<td colspan="6">作 者:郭霖</td>
</tr>
<tr>
<td colspan="10">ISBN:978-7-115-43978-9</td>
<td colspan="5">装 帧:平装</td>
</tr>
<tr>
<td colspan="15">类 别:计算机/软件开发/Android开发</td>
</tr>
<tr>
<td colspan="4">开 本:16</td>
<td colspan="5">页 数:580</td>
<td colspan="6">作 者:郭霖</td>
</tr>
</table>
</div>
</body>
</html>
