CSS 列表和表格

属性	说明	版本
list-style	在一个声明中设置所有的列表属性	CSS1
list-style-type	设置列表项标记的类型	CSS1
list-style-position	设置列表项标记的放置位置	CSS1
list-style-image	将图象设置为列表项标记	CSS1
border-collapse	规定是否合并表格边框	CSS2
border-spacing	规定相邻单元格边框之间的距离	CSS2
caption-side	规定表格标题的位置	CSS2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	CSS2
table-layout	设置用于表格的布局算法	CSS2

list-style

list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性（按顺序）：list-style-type, list-style-position, list-style-image，可以不设置其中的某个值，未设置的属性会使用其默认值。

  list-style:square url("mk.png") outside;
  list-style:square outside;
  list-style:square url("mk.png");
  list-style:square;

list-style-type

list-style-type 属性设置列表项标记的类型。

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02,…)
lower-roman	小写罗马数字(i, ii, iii…)
upper-roman	大写罗马数字(I, II, III…)
lower-alpha	小写英文字母(a, b, c…)
upper-alpha	大写英文字母(A, B, C…)
lower-greek	小写希腊字母(alpha, beta, gamma…)
lower-latin	小写拉丁字母(a, b, c…)
upper-latin	大写拉丁字母(A, B, C…)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban…)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u …（日文片假名）
katakana	标记是：A, I, U …（日文片假名）
hiragana-iroha	标记是：i, ro, ha…（日文片假名）
katakana-iroha	标记是：I, RO, HA…（日文片假名）

<style>
  ul{ 
    border:1px solid #ccc;
    list-style-type:circle;
  }
</style>

<ul>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ul>

list-style-position

list-style-position 属性指示如何相对于对象的内容绘制列表项标记。

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。标记放置在文本左侧以外，且环绕文本不根据标记对齐。

li{ border:1px solid red;}
ul.inside{
  list-style-position: inside
}
ul.outside{
  list-style-position: outside
}

list-style-image

list-style-image 属性使用图像来替换列表项的标记。

值	描述
none	默认。无图形被显示。
URL	图像的路径。

<style>
  ul{ list-style-image:url(mk.png); }
</style>

<ul>
  <li>AAA</li>
  <li>BBB</li>
  <li>CCC</li>
</ul>

border-collapse

border-collapse 属性设置表格的边框是否被合并为一个单一的边框。

注意： 任何版本的Internet Explorer（包括IE9）支持属性值"inherit"。
注意： border - collapse属性,如果没有指定!DOCTYPE，可能产生意想不到的效果。

值	描述
collapse	边框合并为单一的边框。会忽略 border-spacing 和 empty-cells 属性。
separate	默认值。边框会被分开。

<style>
  table{ float: left; margin:50px; }
  .table2{
    border-collapse:collapse;
  }
</style>

<table border="1"> 
 <tr><td>1</td><td>a</td></tr>
 <tr><td>2</td><td>b</td></tr>
</table>

<table border="1" class="table2"> 
 <tr><td>1</td><td>a</td></tr>
 <tr><td>2</td><td>b</td></tr>
</table>

显示结果：

border-spacing

border-spacing 属性设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。

值	描述
length	数值单位。不允许使用负值。 如果定义一个 length 参数，那么定义的是水平和垂直间距。 如果定义两个 length 参数，那么分别是水平间距，垂直间距。

<style>
  table{ 
    border-spacing:30px 15px; 
  }
</style>

<table border="1"> 
 <tr><td>1</td><td>aaaaa</td></tr>
 <tr><td>2</td><td>bbbbb</td></tr>
</table>

caption-side

caption-side 属性设置表格标题的位置。

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。

<style>
  table{ float: left; margin:40px; }
  .table2{ 
    caption-side:bottom; 
  }
</style>

<table border="1"> 
 <caption>表格1</caption>
 <tr><td>1</td><td>aaaaa</td></tr>
 <tr><td>2</td><td>bbbbb</td></tr>
</table>

<table border="1" class="table2"> 
 <caption>表格2</caption>
 <tr><td>1</td><td>aaaaa</td></tr>
 <tr><td>2</td><td>bbbbb</td></tr>
</table>

empty-cells

empty-cells 属性设置是否显示表格中的空单元格（仅用于"分离边框"模式）。

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。

<style>
  table{ float: left; margin:20px; }
  .table2{ 
    empty-cells:hide; 
  }
</style>

<table border="1"> 
 <tr><td>1</td><td>aaaaa</td></tr>
 <tr><td>2</td><td></td></tr>
</table>

<table border="1" class="table2"> 
 <tr><td>1</td><td>aaaaa</td></tr>
 <tr><td>2</td><td></td></tr>
</table>

table-layout

table-layout属性为表设置表格布局算法。

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。

<style>
  table{ float: left; margin:20px; width: 150px;}
  .table2{ 
    table-layout:fixed;
  }
</style>

<table border="1"> 
 <tr>
  <td style="width: 50px;">1</td>
  <td>aaaaaaaaaaaaaaaaaaaa</td></tr>
 <tr><td>2</td><td>b</td></tr>
</table>

<table border="1" class="table2"> 
 <tr>
  <td style="width: 50px;">1</td>
  <td>aaaaaaaaaaaaaaaaaaaa</td>
 </tr>
 <tr><td>2</td><td>b</td></tr>
</table>