复习-css列表和表格相关属性

最新推荐文章于 2024-09-27 15:49:05 发布

原创最新推荐文章于 2024-09-27 15:49:05 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS中列表和表格的相关属性及其使用方法，包括如何设置列表样式及表格布局，例如list-style、border-collapse等，并通过实例展示了具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复习-css列表和表格相关属性

css列表和表格相关属性

list-style：设置所有列表属性

list-style-image：将图像设置为列表项标记，主要有url值

list-style-position:设置列表项标记的放置位置，主要有outside和inside

list-style-type：设置列表项标记的类型，主要有disc、circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-latin、armenian、georgian

border-collapse：表格合并为单一的边框

border-spacing：设置分隔单元格边框的距离

caption-side：设置表格标题的位置

empty-cells：设置是否显示表格中的空单元格

<style type = "text/css">
> .customers{  
> font-family:"Trebuchet MCN;  
> width:100%;  
> border-collapse:collapse;  
> }  
> .customer td, .customer th  
> {  
> font-size:13px;
> border:1px solid;  
> }  
> .customers th  
> {  
> font-size:14px;  
> text-align:left;  
> background-color:#A7C942;  
> color:#ffffff;  
> }  
> .customers tr.alt td
> {color:#000000;
> background-color:#EAF2D3;
> }
> </style>

<table class = "customer">
<tr>
<th>company</th>
<th>contact</th>
<\tr>
<tr class = "alt">
<td>baidu</td>
<td>china</td>
</tr>

#five li{
padding-left:20px;
background:url("icon1.jpg") no-repeat;
}
#tb{width:50%;height:100px;font-family:"宋体";border:1px solid red;border-spacing:20px;caption-side:bottom;empty-cells:hide;
}
#tb tr td{border:1px solid red}

<ul id = "five">
<li>football</li>
<li>baskerball</li>
<li>tennis</li>
<table id = "tb">
<caption>my table</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table