CSS表格与列表

表格样式

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，文字会在最下面