CSS 基础教程:表格(一)

CSS 基础教程:表格(一)

表格是一个HTML元素,用于以带有行和列的结构化格式显示数据。表格使用HTML中的<table>标签创建,并且可以使用CSS属性进行样式设置。

本章讨论如何使用CSS设置HTML表格的不同属性。

首先看看下面的示例,它演示了一个简单的HTML表格:

<html>
<head>
<style>
</style>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

上述示例中的表格是数据的简单显示,可以使用CSS进行样式设置。可以设置表格的以下CSS属性:

  • border-collapse:指定浏览器是否应控制相邻边框的外观,使其相互接触,还是每个单元格应保持其样式。
  • border-spacing:指定单元格之间应出现的宽度。
  • caption-side:指定表格标题应显示的位置(顶部或底部)。
  • empty-cells:指定如果单元格为空,是否应显示边框。
  • table-layout:允许浏览器通过使用遇到的第一个宽度属性来加快表格的布局速度,而不是必须在渲染整个表格之前加载整个表格。
  • widthheight属性设置表格的高度和宽度。
  • text-align属性设置表格单元格中文本内容的水平对齐方式。
  • border属性可用于为表格及其单元格设置边框。
  • background-color属性可以应用于表格本身、表格单元格或表格行。
  • font-size、font-family、font-weight、font-color等设置表格字体。

让我们看看如何在以下各节中使用这些属性的示例。

CSS表格 - 边框合并

border-collapse属性确保表格单元格之间的边框合并为单个边框,从而创建更干净的外观。该属性可以取值为collapseseparate(默认值)。

以下示例仅向单元格和表格的主体添加边框:

<html>
<head>
<style>
   table {
      border: 3px solid purple;
   }
   th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

现在添加border-collapse: collapse;
看看这如何消除表格单元格之间的间距,使边框重叠。

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border: 3px solid purple;
   }
   th, td {
      border: 1px solid black;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

CSS表格-边框间距

边框间距属性指定在表格中分隔相邻单元格边框的距离。此属性可以指定为一个或两个值:

  • border-spacing: 2px;:如果传递一个值,则将间距应用于垂直和水平边框。
  • border-spacing: 1cm 2em;:如果传递两个值,则第一个值定义单元格之间的水平间距(即相邻列中单元格之间的间距),第二个值定义单元格之间的垂直间距(即相邻行中单元格之间的间距)。

现在让我们修改上一个示例并查看效果:

<html>
<head>
<style>
   table {
      border-collapse: separate;
      border-spacing: 1em 0.5em;
      padding: 0 2em 1em 0;
      border: 3px solid purple;
   }
   td {
      width: 1.5em;
      height: 1.5em;
      background: #d2d2d2;
      text-align: center;
      vertical-align: middle;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

注意:边框间距属性仅在边框折叠设置为分离时有效。如果设置为折叠,边框间距属性将不起作用,边框将折叠成一行。

以下是说明上述观点的示例:

<html>
<head>
<style>
   table {
      border-collapse: collapse;
      border-spacing: 1em 0.5em;
      padding: 0 2em 1em 0;
      border: 3px solid purple;
   }
   td {
      width: 1.5em;
      height: 1.5em;
      background: #d2d2d2;
      text-align: center;
      vertical-align: middle;
   }
</style>
<body>
   <table>
      <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
      </thead>
      <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
         </tr>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

CSS表格-标题位置

CSS中的caption-side属性用于控制与表格相关的表格标题的位置或对齐。

caption-side属性可以具有以下值之一:

  • top:标题放置在表格上方。
  • bottom:标题放置在表格下方。
  • block-start:标题框位于表格的块起始边缘。
  • block-end:标题框位于表格的块结束边缘。
  • inline-start:标题框位于表格的内联起始边缘。
  • inline-end:标题框位于表格的内联结束边缘。
  • inherit:值从父元素的caption-side属性继承。

让我们看一个示例:

<html>
<head>
<style>
   .top caption {
      caption-side: top;
   }
   .bottom caption {
      caption-side: bottom;
   }
   table {
      border: 1px solid red;
   }
   td {
      border: 1px solid blue;
   }
</style>
<body>
   <table class=“top”>
      <caption>
         Caption ABOVE the table
      </caption>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            </tr>
      </tbody>
   </table>
   <br />
   <table class=“bottom”>
      <caption>
         Caption BELOW the table
      </caption>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

注意:caption-side属性仅适用于具有<caption>元素的表。 <caption>元素用于为表提供标题或描述。 如果表格没有标题,caption-side属性将没有任何效果。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 《HTML5与CSS3基础教程(第8版)》是一本很好的学习HTML与CSS的教材。本书内容详实,涵盖了HTML与CSS的基本知识,以及更高级的功能和技巧。此外,书中还提供了很多案例和练习,帮助读者更好地掌握学习内容。 本书首先介绍了HTML与CSS的基础知识,包括HTML元素、属性、标签等的概念,以及CSS的选择器、样式、样式表等。接着,本书详细讲解了网页布局、文本格式化、图像、表格、表单和媒体等方面的内容,并提供了大量的实例,方便读者实际操作。 此外,本书还介绍了响应式设计的概念和实现方式,以及一些HTML5和CSS3新特性的应用。这些新特性包括支持多媒体、语义化标签、动画效果和响应式布局等。 总的来说,《HTML5与CSS3基础教程(第8版)》是一本很好的入门教材,适合想要学习HTML与CSS的初学者。本书内容详尽,逐步讲解,让读者能够循序渐进地掌握所学知识。此外,书中提供的案例和练习也非常有帮助,能够帮助读者更好地理解和应用所学内容。 ### 回答2: 《HTML5与CSS3基础教程(第8版)》PDF是一本基础教程,旨在为初学者介绍HTML5和CSS3的基本概念、语法和使用方法。本书内容详细,从最基本的标签和属性开始讲解,逐渐深入,介绍了HTML5和CSS3的新特性和应用。 在HTML5方面,本书详细介绍了HTML5的文档类型、结构元素、表单、媒体和新API等内容。在CSS3方面,本书则深入讲解了选择器、盒子模型、定位、动画和响应式设计等主题,并介绍了一些有用的CSS库和框架。 此外,本书还提供了大量的实例和练习,让读者能够运用所学知识进行实际操作和练习,加深对HTML5和CSS3的理解和掌握。 总的来说,《HTML5与CSS3基础教程(第8版)》PDF是一本非常实用的入门教材,适合想要学习前端开发的新手使用。通过认真学习,读者可以快速掌握HTML5和CSS3的基本知识和技能,为进一步深入学习和实践打下坚实的基础。 ### 回答3: 《HTML5与CSS3基础教程》(第8版)是一本面向初学者的教材,它详细介绍了HTML5和CSS3基础知识的概念、语法、标签等内容。 本书内容分为两部分:HTML5和CSS3。在HTML5部分,本书介绍了HTML5的新特性,包括语义化标签、表单扩展等,并通过实例让读者深入理解HTML5的应用。在CSS3部分,本书介绍了CSS3新增的选择器、盒子模型、文本特效、渐变、动画和媒体查询等,通过实例演示了CSS3的强大功能。 此外,本书还提供了在线学习资源和课后练习题,让读者能够更加深入地掌握HTML5和CSS3。本书适合想要学习Web前端开发的初学者,也适合已有一定基础的开发者查阅。总之,《HTML5与CSS3基础教程》(第8版)是一本很好的教材,它通过深入浅出的方式帮助读者快速上手并掌握HTML5和CSS3开发的基础知识。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值