旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

caption-side属性怎样用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:114


导读:caption-side属性用来设置表格题目的位置,能够设置表格题目是位于表格的上面,照样下面。CSScaption-side属性作用:caption-side属...
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>

效果图:

以上就是caption-side属性怎样用的细致内容,更多请关注ki4网别的相干文章!

标签:caption-side属性css