表格样式
border-collapse
相邻单元格的边框样式
separate默认值，单元格边框独立
collapse单元格相邻边框被合并
table{
border-collapse:collapse;
}
解释：单元格相邻的边框被合并
border-spacing
相邻单元格边框的间距
table{
border-spacing:10px;’
}
解释：border-collapse:separate;的状态下才有效。因为要设置间距，不能合并。
caption-side
top默认值，标题在上方居中
bottom标题在下方居中
table{
caption-side:bottom;
}
解释：设置表格标题的方位。
empty-cells
show默认值，显示边框
hide不显示边框
table{
empty-cells:hide;
}
解释：单元格内容为空是隐藏边框。
table-layout
auto默认值，内容过长时，拉伸整个单元格
fixed内容过长时，不拉伸整个单元格（高度会拉伸）
table{
table-layout:fixed;
}
解释：内容过长后，不会拉伸整个单元格。
table {
width: 400px;
height: 300px;
text-align: center;
border: 1px solid red;
}
table tr th, table tr td {
border: 1px solid red;
}
列表样式
list-style-type 列表中的标记类型
none没有标记
disc实心圆
circl空心圆
square实心方块
decimal阿拉伯数字
lower-roman小写罗马数字
upper-roma大写罗马数字
lower-alpha小写英文字母
upper-roman大写英文字母
ul{
list-style-type:square;
}
解释：列表前缀的标记类型
list-type-position
outside默认值，标记位于内容框外部
inside标记位于内容框内部
ul{
width:120px;
list-style-position:inside;
}
<ul>
<li>张三，是一个非常好的青年</li>
<li>李四</li>
<li>王五<b>2</b></li>
<li>马六</li>
</ul>
解释：标记位于内容框的内部。
list-type-image
none不使用图像
url通过url使用图像
ul{
list-style-image:url(bullet.png);
}
解释：使用图片作为前缀的标记。
list-style
ul{
list-style:lower-alpha inside url(bullet.png);
}
解释：简写形式
其他功能
在<table>中<td>单元格，我们可以使用text-align属性水平对齐，但是垂直对齐就无法操作了。CSS提供了vertical-align属性用于垂直对齐。
baseline内容对象与基线对齐
top内容对象与顶端对齐
middle内容对象与中部对齐
bottom内容对象与底部对齐
table tr td{
vertical-align:bottom;
}
比如
.sex {
vertical-align: bottom;
/* vertical-align: baseline;*/
/*vertical-align: middle;*/
}
<tr>
<td>张三</td>
<td class="sex">男</td>
<td></td>
</tr>
解释：将单元格内的内容对象实现垂直对齐。
sub垂直对齐文本的下标
super垂直对齐文本的上标
b{
vertical-align:super;
}
<li>王五<b>2</b></li>
解释：文本上下标设置。
长度值设置上下的偏移量，可以是负值
百分比同上
div span {
background: green;
vertical-align: -50px;
/*vertical-align: -200%;*/
}
<div><span>我是HTML5</span></div>
解释：负值往下，正值往上。如果默认基线在上面，用负数。如果默认基线在下面，用正值。
em {
vertical-align: 80px;
}
<em>内容简介：</em><textarea rows="10"></textarea>
如果不用em，文字会在最下面