1 HTML表格
1.1 HTML创建表格
表格是由
<table>
元素来定义的,内含<tr>
以及<td>
元素,<tr>
元素负责行,<td>
为单元格。而表格的表头用<th>
来定义,多数浏览器会将其显示为粗体字。
它的具体操作就与CSS中的表格布局差不多,要多结合理解哦。
- 使用
<table>
标记开始这个表格 - 使用
<caption>
定义表格标题 - 使用
<tr>
元素定义开始第一行或另起一行 - 使用
<td>
元素或者<th>
表头元素定义单元格
<td>
或<th>
的colspan
属性以及rowspan
属性定义合并单元格:
colspan
设置单元格可横跨的列数rowspan
设置单元格可横跨的行数
<table>
<tr>
<th>姓名</th>
<th>毕业院校</th>
</tr>
<tr>
<td rowspan="2">Seiei</td>
<td>校名1</td>
</tr>
<tr>
<td>校名2</td>
</tr>
</table>
1.2 CSS修饰表格
1.2.1 定义边框
当为表格添加边框样式后,会发现每个单元格之间有边框间距。
想要取消这边框间距,除了像CSS实现表格布局那样定义border-spacing
属性外,还可以定义<table>
元素中的border-collapse
属性。
table {
border-collapse:collapse;
}
1.2.2 定义颜色
想要定义隔行颜色时,可以使用伪类选择器nth-child
,按照自定义的数字顺序标准选择出想要的行数:
tr:nth-child(oven) {
background-color:yellow;
}
1.2.3 定义对齐
就像是CSS格式布局一样,表格对齐文本除了text-align
属性还有vertical-align
属性
table {
vertical-align:top;
}
2 HTML列表
HTML 支持有序、无序和定义列表
2.1 无序列表(unordered list)
无序列表使用粗体圆点(典型的小黑圆圈)进行标记,可用<ul>
标记开始定义无序列表,<li>
元素定义列表项(list item),如:
<ul>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
</ul>
此时除了一些常规的CSS样式外,还可以定义list-style-type
属性更换粗体圆点标记,
li {
list-style-type:circle;
}
其中属性值分别为:
- disc:默认黑色圆点
- circle:空心圆点
- square:实心矩形
- none
当然也可以使用list-style-image
属性自定义图片:
li {
list-style-image:url(url);
}
如果希望多出的第二行文本不要凸出标记就可以定义list-style-position
属性:
- inside:文本可以凸出标记
- outside: 文本不能凸出标记
li {
list-style-position:inside;
}
2.2 有序列表(orderde list)
使用<ol>
标记开始定义无序列表,<li>
元素定义列表项(list item)。如:
<0l>
<li>monday</li>
<li>tuesday</li>
<li>wednesday</li>
</0l>
其中list-style-type
属性常用的值包括:
- decimal :十进制数
- upper-alpha :大写字母
- lower-alpha :小写字母
- upper-roman :大写罗马数字
- lower-roman :小写罗马数字
2.3 定义列表
使用<dl>
标记开始定义无序列表,<dt>
元素定义一级列表项,<dd>
定义二级列表项。如:
<dl>
<dt>手机</dt>
<dd>苹果</dd>
<dt>电脑</dt>
<dd>外星人</dd>
</dl>