.readcl table{border-collapse:collapse;margin:auto;}.readcl{margin:0 auto 20px;line-height:2;}.readcl,.readcl div{color:darkseagreen;font-family:Verdana,MS Sans Serif,simsun;font-size:13px;}.tja{color:darkseagreen;text-decoration:underline;text-decoration-color:#ccc;}.readcl::selection,.readcl div::selection,.readcl p::selection,.readcl td::selection,.readcl th::selection,.readcl caption::selection,.readcl center::selection{background:darkseagreen;color:white;}.hone,.htwo{color:#090;text-align:center;}.hone{margin:10px auto;font:20px/30px 微软雅黑 bold;}.htwo{width:500px;margin:0 auto 15px;padding-bottom:5px;border-bottom:2px solid #090;line-height:1.6;}table.texp{margin:0 auto 25px;color:gray;font-size:12px;line-height:1.8;}table.texpe{margin-bottom:20px;border-collapse:separate;color:white;}.texpe th{color:black;font-size:14px;}.texpe td{vertical-align:top;line-height:1.4;}.texpe img{width:150px;}.textarea,.txtarea{cursor:default;overflow-x:auto;overflow-y:scroll;background:darkseagreen;color:#eefaee;font:12px/1.6 simsun;font:11px/1.6 Verdana,MS Sans Serif;text-align:left;}.txtarea{background:#bbb;}span.textarea,span.txtarea{padding:2px 6px;}p.textarea::selection,span.textarea::selection,td.textarea::selection{background:transparent;color:seagreen;}.txtarea::selection{background:transparent;color:#666;}.textarea::-webkit-scrollbar,.textarea::-webkit-scrollbar-corner{background:transparent;}.textarea::-webkit-scrollbar-thumb,.textarea::-webkit-scrollbar-button{border-radius:20px;border:4px solid #8FBC8F;background:#eefaee;}.texa{width:500px;}.texa th{border-bottom:1px solid;text-align:left;}.centd,.centd td{padding:10px 15px;border:1px solid;border-width:0 1px;line-height:1.8;}初识表格一个表格是由哪些组成的呢？用过Excel的人一定会回答：单元格。Html的表格不仅由单元格组成，下面来看下表格包含哪些部分。
表格的标题表格中的标题表格中的标题表格中的标题单元格内容单元格内容单元格内容 .. .. .. .. .. .. .. 表格行单元格这三项，是表格的基本构成。在这基础上，可以添加：表格的标题标题单元格…"table"是表格的开始和结束，其他标签都要写在"table"里。书写结构见左←表格"table"里写行"tr" 行"tr"里写单元格"td" 或标题单元格"th"表格的标题"caption"写在表格"table"里最前的位置 后面紧跟行"tr"我想更改这个单元格的对齐方式valign & align对齐方式↖↑↗←·→↙↓↘ ↖ ↑ ↗ ← · → ↙ ↓ ↘
"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 垂直居中 水平居中对比下面列出的六个表格，有发现哪些不同？为了更灵活更美观的布局，你需要知道的小技巧。
|
|
| ■ |
ⅠⅡⅢxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxⅣⅤⅥ边框"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:简而言之，走上人生巅峰，成为白富美阮荨荨得知男朋友出轨，冲进酒店捉奸。谁料，这一捉，倒是捉出一只“禽兽“来。于是她决定把这只”禽兽“拐回家……周时亦参加一场聚会，贸贸然闯进一名“不速之客”。而他认得这名“不速之客”。当年的偷窥狂、跟踪狂。曾经追他半途而废如今又卷土重来……还有完没完了？《重生八零年代好生活》《藏在时光深处的你》 标题 封面图片 文章摘要/介绍 文章名称 标题 封面图片 文章摘要/介绍 封面图片 文章摘要/介绍 文章名称 文章名称 结构就是这样的↑标题单元格"th"和单元格"td"组成，分四列，按需合并。单元格外边距"cellspacing"设置为5，内边距"cellpadding"为1。框架搭好了，可以添加点颜色。 对的，文字颜色写在"style"里。背景色和列宽我用的标签，用到了就顺便讲下：（可以这样理解）是行，则是对应的列。目前"col"支持的属性不多，仅背景色和宽度。我们都知道，列宽可以通过任意一行的单元格进行设置，只要有一行书写即可。至于背景色，这么花哨的布局真的常见么……？嗯，鉴于实用性太低前面就没讲。等它支持对齐和文字颜色再拉出来吧。 标题 封面图片 文章摘要/介绍 文章名称 标题 封面图片 文章摘要/介绍 封面图片 文章摘要/介绍 文章名称 文章名称 这就是完整的代码了。"style"里还可以放文字大小：style="font-size:14px;"
| |
