表格标题位置-CSS入门基础（020）

今天我们接着分享表格样式的内容。

默认情况下，表格标题位置是在表格的上方，但是如果我们想要把表格标题放在表格下方呢？

在css中，我们可以使用caption-side属性来定义表格标题的位置。

语法：

caption-side:属性值；

caption-side属性取值
属性值	说明
top	默认值，标题在顶部
bottom	标题在底部

示例代码：

<html>  <head>    <title>表格标题</title>    <style type="text/css">      table,td { border:1px solid black;}      caption { caption-side:bottom;}    </style>  </head>  <body>    <table>      <caption>表格标题</caption>      <tr>        <td>单元格</td>        <td>单元格</td>      </tr>      <tr>        <td>单元格</td>        <td>单元格</td>      </tr>    </table>  </body></html>

这个大家了解一下就好了，因为我们中国人制作表格，基本标题都会在上方使用，在下面的很少见。

本章总结：

边框合并border-collapse：

语法：

border-collapse：属性值；

它是表格独有的属性，其他元素没有这个属性。

属性取值有，

separate，边框分开不合并，

collapse，边框合并，相邻共用。

边框边距border-spacing:

语法：

border-spacing:像素值；

该属性指定单元格边界之间的距离。指定一个像素值时，作用于横向和纵向上的间距；指定两个像素值时，第一个作用于横向间距，第二个作用于纵向间距。

标题位置caption-side：

语法：

caption-side：属性值；

属性取值，

top，上方

bottom，下方

表格在网页设计中，使用的还是比较多的，大家如果需要掌握表格的应用，就需要多加练习，下面给一段示例代码，写一个我们经常见到的场景。

<html>  <head>    <title>表格示例</title>    <style type="text/css">      table,th,td       {        border:1px solid black;      }      th { height:30px;}      td { height:24px;}      table       {        border-collapse:collapse;        text-align:center;        width:60%;        margin: 0 auto;      }            caption      {        caption-side:top;        font-size:20px;        margin-bottom:20px;        font-family: "黑体"，"宋体";        font-weight:bold;      }      thead      {        background-color:#666666;        font-size:18px;        font-family: "楷体","宋体";      }            tbody      {        background-color:#dddddd;        font-size:15px;        font-family:"Arial","新宋体";      }            tfoot      {        background-color:yellow;        font-size:18px;      }    </style>  </head>  <body>  <table>    <caption>卖场货品统计表</caption>    <thead>      <tr>        <th>序号</th>        <th>品名</th>        <th>数量</th>        <th>单价（元）</th>        <th>金额(元)</th>      </tr>    </head>    <tbody>      <tr>        <td>1</td>        <td>牛奶</td>        <td>20箱</td>        <td>30.00</td>        <td>600.00</td>      </tr>      <tr>        <td>2</td>        <td>苹果</td>        <td>70斤</td>        <td>10.00</td>        <td>700.00</td>      </tr>      <tr>        <td>3</td>        <td>青岛啤酒</td>        <td>100桶</td>        <td>5.00</td>        <td>500.00</td>      </tr>    </tbody>    <tfoot>      <tr>        <td colspan="4">合计金额</td>        <td>1800.00</td>      </tr>    </tfoot>  <table>    </body></html>

之前给大家分享时，这些代码都是我手动敲上去的，也希望大家多加练习，也是手动敲上去，但是随着属性学习多了后，手动容易出错，难以调试，在这里建议大家去下载一些可以IDE工具，比如webstrom，phpstorm等等，有了工具的帮助后，学习代码会轻松些。

表格标题位置-CSS入门基础（020）相关推荐

CSS入门基础-目录
CSS简介-CSS入门基础(001) CSS选择器-CSS入门基础(002) id选择器的使用-CSS入门基础(003) 子选择器的使用-CSS入门基础(004) 字体样式-CSS入门基础(005) ...
CSS入门基础（样式，css文件，选择器）
CSS入门学习 CSS的简介基本语法结构基本用法给元素添加样式行内样式内部样式外部样式定义样式css文件在html中引入css文档选择器标签选择类选择 id选择 CSS的简介层 ...
学起来 —— CSS 入门基础
Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一为"两个分离",二为语言遵循语义化, ...
HTML如何改变表格浮动位置,css控制表格样式 css布局浮动及定位
一.制作一张商品信息表,内容自定,要求用到行与列的合并实例 html> 饮料商品信息表 table caption { font-family:"宋体"; font-siz ...
LaTeX的表格标题位置
现有一个表格,若要把表格标题放在表格下面,则把\caption{***}这一行代码放在下面,如下所示: \begin{table}[H]\renewcommand{\arraystretch}{1.3 ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
CSS入门基础学习（上）
css是层叠样式表的简称,有时称为css样式表或级联样式表. css是一种标记语言,用于设置HTML页面中的文本内容,图片的外形,以及版面的布局和外观显示样式.可以美化HTML的外观页面看起来更加简介 ...
LaTeX 表格标题位置无法移动的问题
问题在写文章的时候,发现表格的标题出现在表格下方,不符合标准,所以想把表题移到表格上方去解决思路 1. 失败的方法采用常规方法,移动\caption{}的位置,发现没有效果,不管\caption ...
【测试基础】之03 CSS入门基础
CSS基础目标知道CSS的作用基本掌握CSS语法规则 CSS简介 CSS:(Cascading Style Sheets)指层叠样式表作用:用来定义如何显示HTML元素(定义HTML元素的样式 ...

表格标题位置-CSS入门基础（020）

表格标题位置-CSS入门基础（020）相关推荐

最新文章

热门文章