前端CSS基础6（CSS列表与表格的相关属性，边框的样式调整）
- CSS列表相关属性
- CSS表格相关属性
- 回忆表格
- 边框相关属性
- 单元格边框相关属性
- 回忆单元格的跨行和跨列
- 操作单元格边框的相关属性
CSS列表相关属性
在 CSS 中，列表（List）是常见的网页元素之一，可以使用以下属性来对列表进行样式设置：
回忆列表
<ul> <!-- 无序列表容器 -->
<li>List item 1</li> <!-- 第一个列表项 -->
<li>List item 2</li> <!-- 第二个列表项 -->
<li>List item 3</li> <!-- 第三个列表项 -->
</ul>
<ol> <!-- 有序列表容器 -->
<li>List item 1</li> <!-- 第一个列表项 -->
<li>List item 2</li> <!-- 第二个列表项 -->
<li>List item 3</li> <!-- 第三个列表项 -->
</ol>
list-style-type：指定列表项标记的类型，这些属性适用于<ul>（无序列表）和<ol>
（有序列表）元素，常见取值包括：
disc：实心圆点。
circle：空心圆点。
square：实心方块。
decimal：阿拉伯数字。
upper-roman：大写罗马数字。
lower-alpha：小写字母。
ul {
list-style-type: disc;
}
list-style-position：指定列表项标记的位置，可选值有：
inside：标记位于列表项内部。
outside：标记位于列表项外部。
ul {
list-style-position: inside;
}
list-style-image：使用自定义图像作为列表项标记，指定图像的 URL。
ul {
list-style-image: url('path/to/image.png');
}
list-style：上述三个属性的缩写形式，复合属性，按顺序指定list-style-type,list-style-position,list-style-image。
ul {
list-style: square inside url('path/to/image.png');
}
- list-style-color：用于定义列表项标记的颜色。
ul {
color: red; /* 列表项标记的颜色 */
}
这些属性可以应用于 <ul> （无序列表）和 <ol> （有序列表）元素，<li>也可以。通过调整这些属性。
CSS表格相关属性
回忆表格
先回忆回忆表格，咱就是说学着忘着：
在 HTML 中，表格由以下几个主要元素组成，这些元素构成了表格的结构：
<table>：用于定义整个表格。所有表格内容都应该位于 <table> 标签内。
<tr>：表示表格中的行（table row）。每个 <tr> 元素代表表格中的一行。
<th> 和 <td>：在表格中用来定义单元格内容的元素。
<th> 用于定义表头单元格，通常显示为粗体且居中，可用于表示列或行的标题。
<td> 用于定义普通数据单元格，包含实际表格数据。
<thead>、<tbody> 和 <tfoot>：这些元素用于将表格内容分组，分别表示表头、表身和表尾部分。这有助于更好地组织表格内容并应用样式。
<caption>：用于为整个表格添加标题，位于 <table> 标签之后且在表格上方显示。
下面为具体表格的举例。
<table>
<caption>Monthly Sales Report</caption>
<thead>
<tr>
<th>Month</th>
<th>Sales Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$5000</td>
</tr>
<tr>
<td>February</td>
<td>$6000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$11000</td>
</tr>
</tfoot>
</table>
点我回忆表格基础知识呀呀呀
边框相关属性
边框相关属性：
border-width、border-style、border-color：分别用于设置边框的宽度、样式和颜色。ps:表格的border属性不仅表格元素可以使用，其他元素也可以使用。
示例：
table{
border-width: 2px;
border-style: dashed;
border-color: red;
}
border：把border-width、border-style、border-color：分别用于设置边框的宽度、样式和颜色。这三种属性三合一，用于设置表格边框的样式、宽度和颜色，可以分别指定（有顺序）。
示例：border: 1px solid black;
ps:表格的border属性（以上属性）不仅表格元素可以使用，其他元素也可以使用。
以下是表格独有的属性：
border-radius：用于设置边框的圆角半径。
示例：border-radius: 5px;
单元格边框相关属性
回忆单元格的跨行和跨列
要在 HTML 表格中实现单元格的跨行（rowspan）和跨列（colspan），你可以使用以下属性：
rowspan：指定单元格跨越的行数。
colspan：指定单元格跨越的列数。
点我回忆表格基础知识呀呀呀
操作单元格边框的相关属性
表格相关属性：
border-collapse：合并相邻的单元格的边框，可以是 collapse（边框合并）或 separate（边框分开）。
示例：border-collapse: collapse;可以使相邻单元格的边框合并。
border-spacing：指定表格边框与单元格，单元格与单元格之间的间距，仅在 border-collapse 设置为separate 时生效。
示例：border-spacing: 5px;
设置 border-spacing: 0; 可以消除合并后的单元格之间的间距。
table-layout：控制表格的列宽，有两个值的选择：auto和fixed
auto：浏览器根据内容自动调整列宽，可能会导致表格的各列宽度不一致。
fixed：强制表格布局固定，并且所有列的宽度由表格的宽度、列宽和单元格内部内容共同决定。这种方式可以更精确地控制表格的布局，使得列宽更加统一。
举例： table-layout: fixed;可以提供更加可控和稳定的表格布局，适用于需要精确控制列宽和提高性能的情况。
empty-cells：用于指定空单元格的边框显示方式，生效前提：单元格不能合并。
示例：empty-cells: hide;
caption-side：这个属性用于指定 元素的位置。它有两个可能的取值：
top：将 元素放置在表格上方。
bottom：将 元素放置在表格下方。
通过在 CSS 中设置 caption-side 属性来控制 元素的位置。例如，要将 放置在表格上方，可以这样设置：
caption {
caption-side: top;
}
