初识表格
一个表格是由哪些组成的呢？用过Excel的人一定会回答：单元格。
Html的表格不仅由单元格组成，下面来看下表格包含哪些部分。
表格的标题| 表格中的标题 | 表格中的标题 | 表格中的标题 |
|---|
| 单元格内容 | 单元格内容 | 单元格内容 |
<table>
<caption> .. </caption>
<tr>
<th> .. </th>
<th> .. </th>
<th> .. </th>
</tr>
<tr>
<td> .. </td>
<td> .. </td>
<td> .. </td>
</tr>
</table> | | <table></table>表格
<tr></tr>行
<td></td>单元格
这三项，是表格的基本构成。 | 在这基础上，可以添加：
<caption></caption>表格的标题
<th></th>标题单元格
… |
| "table"是表格的开始和结束，其他标签都要写在"table"里。
书写结构见左←
表格"table"里写行"tr" 行"tr"里写单元格"td" 或标题单元格"th"
表格的标题"caption"写在表格"table"里最前的位置 后面紧跟行"tr" |
我想更改这个单元格的对齐方式
valign & align
<table>
<tr>
<td valign="top" align="left"> ↖ </td>
<td valign="top" align="center"> ↑ </td>
<td valign="top" align="right"> ↗ </td>
</tr>
<tr>
<td valign="middle" align="left"> ← </td>
<td valign="middle" align="center"> · </td>
<td valign="middle" align="right"> → </td>
</tr>
<tr>
<td valign="bottom" align="left"> ↙ </td>
<td valign="bottom" align="center"> ↓ </td>
<td valign="bottom" align="right"> ↘ </td>
</tr>
</table>
"valign"垂直对齐方式
valign : top | middle | bottom | "align"水平对齐方式
align : left | center | right |
"valign"和"align"可以直接写在"tr"、"th"、"td"里，上面是直接写法。
"table"和"caption"则只有水平对齐有效，写法也略有不同：
"align"写作"text-align" 且要写在"style"里
虽说换了一个名字，赋值还是一样的(left|center|right)。
写法：table style="text-align: right;" |
记住对齐属性的默认值，对于排版有很大便利。
避免了重复，不就让书写变得更简洁吗？
| 表格在没有书写对齐属性的时候，也就是默认的值，是这样的： |
valign=center align=left
垂直居中 水平居左
|
| 除了标题"caption"和"th"： |
| "caption" | "th" |
valign=top align=center
垂直居上 水平居中
| valign=center align=center
垂直居中 水平居中 |
对比下面列出的六个表格，有发现哪些不同？
为了更灵活更美观的布局，你需要知道的小技巧。
| 边框"border" |
|---|
前面我用的例子都是Ⅰ型的，细细的一条。
没有边框的先不谈，这里的小技巧就是"border-collapse"。
border-collapse : separate | collapse
当它的值是"collapse"的时候，相邻的两条边框就会合并，"separate"则是不合并，这也是不进行书写时的默认值（所以当你不希望边框合并的时候就不用写"border-collapse"啦:P）。
它必须写在"table"标签的"style"里才能生效。
写法：table style="border-collapse: collapse;" |
嗯，写好了是否合并边框，接下来就可以编辑边框的宽度和颜色了，这两者都可以直接在"table"标签里书写。
像这样：table border="1" bordercolor="gray"
"border"边框宽度 "bordercolor"边框颜色 |
| 背景色"bgcolor" |
|---|
写法：table bgcolor="#ccc" tr bgcolor="#ccc" td bgcolor="#ccc"
↑表格的所有标签都支持"bgcolor" |
| 宽"width" 高"height" |
|---|
差点忘记基础属性，宽高也是可以直接书写的，表格的所有标签都支持。
写法：table width="500" height="120" |
| 外边距"cellspacing" 内边距"cellpadding" |
|---|
这是一个很方便的属性，看上面的Ⅳ~Ⅵ，前两个是单元格的外边距，后一个是单元格的内边距，为了看上去更明显我特意加了背景色。
和合并边框的属性一样，要写在"table"里才能生效。
写法：table cellspacing="10" cellpadding="10" |
| 合并列"colspan" 合并行"rowspan" |
|---|
写法：td colspan="3" td rowspan="2"
可以写在"td" "th"里。 |
以上介绍的这些标签和属性，根据自身需求拿来使用。
文案用到的其实并不多，作者的话，了解一下表格的书写结构就足够了w
给作者推荐《晋江文栏特效代码》来读。
很容易上手的教程，上手后想深入也有，还有人工客服解答，还有铺子推荐…
棒！不！棒！
不用谢，我是卖安利的。
写了一个示例
关于作者的文案排版，想了想只有推文可以写……放专栏貌似还行？
（素材来自言情站的封面推荐）
| 新文公告/当前更新 |
|---|
 | 国际交响乐惯例规定：乐曲终了，只有首席小提琴才能与指挥家握手谢幕。
梁语陶毕生的目标，就是成为能够在谢幕礼上，和著名指挥家谢绍康一起握手谢幕的那个人。
而曾易舟毕生的目标，就是折断谢绍康的那只手，让他永远握不上梁语陶的手。
然而，曾易舟大概永远不会知道，梁语陶的琴为何要叫做柏欧特。
柏欧特，英文发音boat，中文译作船，文言文译作舟。
他的名。 |
| 《舟》 |
| 基友的文/已完结 |
|---|
 | 意外而亡的苏敏重生在了自己十三岁的时候。
这辈子，父亲还没有因为没钱治病而死去，母亲也是健健康康的，这个家还完整。
这辈子，苏敏决定，一定要改变家人的命运，让家人过上好的生活。
PS:简而言之，走上人生巅峰，成为白富美 |  | 阮荨荨得知男朋友出轨，冲进酒店捉奸。
谁料，这一捉，倒是捉出一只“禽兽“来。
于是她决定把这只”禽兽“拐回家……
周时亦参加一场聚会，贸贸然闯进一名“不速之客”。
而他认得这名“不速之客”。
当年的偷窥狂、跟踪狂。
曾经追他半途而废如今又卷土重来……
还有完没完了？ |
| 《重生八零年代好生活》 | 《藏在时光深处的你》 |
| |
<table cellspacing="5" cellpadding="1">
<tr>
<th colspan="4"> 标题 </th>
</tr>
<tr>
<td> 封面图片 </td>
<td colspan="3" rowspan="2"> 文章摘要/介绍 </td>
</tr>
<tr>
<td> 文章名称 </td>
</tr>
<tr>
<th colspan="4"> 标题 </th>
</tr>
<tr>
<td> 封面图片 </td>
<td rowspan="3"> 文章摘要/介绍 </td>
<td> 封面图片 </td>
<td rowspan="3"> 文章摘要/介绍 </td>
</tr>
<tr>
<td> 文章名称 </td>
<td> 文章名称 </td>
</tr>
</table>
结构就是这样的↑
标题单元格"th"和单元格"td"组成，分四列，按需合并。
单元格外边距"cellspacing"设置为5，内边距"cellpadding"为1。
框架搭好了，可以添加点颜色。
<table cellspacing="5" cellpadding="1" style="color:white;">
对的，文字颜色写在"style"里。
背景色和列宽我用的<col />标签，用到了就顺便讲下：
（可以这样理解）<tr>是行，<col />则是对应的列。
目前"col"支持的属性不多，仅背景色和宽度。
我们都知道，列宽可以通过任意一行的单元格进行设置，只要有一行书写即可。
至于背景色，这么花哨的布局真的常见么……？
嗯，鉴于实用性太低前面就没讲。等它支持对齐和文字颜色再拉出来吧。
<table cellspacing="5" cellpadding="1" style="color:white;">
<col style="width:150px;background:#ccc;" />
<col style="width:200px;background:cadetblue;" />
<col style="width:150px;background:#ccc;" />
<col style="width:200px;background:cadetblue;" />
<tr>
<th colspan="4"> 标题 </th>
</tr>
<tr>
<td> 封面图片 </td>
<td colspan="3" rowspan="2"> 文章摘要/介绍 </td>
</tr>
<tr>
<td> 文章名称 </td>
</tr>
<tr>
<th colspan="4"> 标题 </th>
</tr>
<tr>
<td> 封面图片 </td>
<td rowspan="3"> 文章摘要/介绍 </td>
<td> 封面图片 </td>
<td rowspan="3"> 文章摘要/介绍 </td>
</tr>
<tr>
<td> 文章名称 </td>
<td> 文章名称 </td>
</tr>
</table>
这就是完整的代码了。
"style"里还可以放文字大小：style="font-size:14px;"
