Rumah > Artikel > hujung hadapan web > caption-side属性怎么用
caption-side属性怎么用
- 青灯夜游asal
- 2019-02-16 11:40:163492semak imbas
caption-side属性用来设置表格标题的位置，可以设置表格标题是位于表格的上面，还是下面。
CSS caption-side属性
作用：caption-side属性设置表格标题的位置。
语法：
caption-side: top|bottom;
参数：
top：默认值，把表格标题定位在表格之上。
bottom：把表格标题定位在表格之下。
说明：所有主流浏览器都支持caption-side属性；但IE8只有指定!DOCTYPE才支持caption-side属性。
CSS caption-side属性的使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
td{
padding:10px 20px;
}
#example1 {
caption-side: bottom;
}
#example2 {
caption-side: top;
}
</style>
</head>
<body>
<h2>caption-side: bottom:</h2>
<table id="example1" border="1">
<caption>标题</caption>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
</table>
<h2>caption-side: top (默认值):</h2>
<table id="example2" border="1">
<caption>标题2</caption>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
<tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr><tr>
<td>测试文本</td>
<td>测试文本</td>
<td>测试文本</td>
</tr>
</table>
</body>
</html>效果图：
Atas ialah kandungan terperinci caption-side属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css align-items属性怎么用？Artikel seterusnya：column-count属性怎么用