如何使用CSS对表格进行样式化，以获得最大的影响力并吸引注意。

作者姚伟斌

在处理HTML（超文本标记语言）和其他标记语言（如XML）时，您将遇到许多属性和标签。表格是您应该始终使用的属性，以便用户可以轻松地扫描、比较和分析大量数据。

通过表格，用户可以一目了然地查看关键要点、结论或结果，即使不阅读整篇文章也可以。您可以使用CSS来样式化和更改表格的外观。

这些是您可能需要在应用程序中样式化表格的一些原因：

  • 改善视觉外观：常规表格可能很乏味和平淡。样式化这些表格将改善它们的外观，使它们对用户更具吸引力。
  • 提高可访问性：样式化表格可以使它们即使对于残障人士也易于访问。
  • 提高可读性：您可以使用不同的样式化技术，使用户能够轻松浏览您表格中呈现的数据。
  • 品牌推广：当您在整个应用程序中应用一致的字体和颜色时，可以加强品牌身份。
  • 有利于搜索引擎：将数据组织成表格格式将有助于您在搜索引擎中排名较高。

使用HTML创建基本表格

为了演示HTML中的表格的工作原理，我们将创建一个项目文件夹，进入该文件夹并创建两个文件；index.html，其中包含我们的HTML代码，和styles.css，其中包含我们的CSS代码（样式）。

如果您希望跟随操作，请使用以下命令开始：

mkdir Styling-HTML-Tables

cd Styling-HTML-Tables

touch Styling-HTML-Tables

现在您已经有了基本的项目文件夹，可以帮助您创建HTML表格。我想展示不同的编程语言、它们的用途以及使用这些语言的公司的示例。

要创建HTML表格，所有数据都应该放在

...

标签中。

在您的HTML文件中，生成HTML文档的基本结构。将此代码添加到标签中。



        

          

          

          

        

        

          

          

          

        

        

          

          

          

        

        

          

          

          

        

        

          

          

          

        

        

          

          

          

        

        

          

          

          

        

      
编程语言常见用途使用公司
JavaWeb应用程序、Android应用程序、企业应用程序谷歌、亚马逊、领英
Python数据科学、Web开发、自动化谷歌、Dropbox、Spotify
JavaScriptWeb开发、前端开发、浏览器脚本PayPal、Facebook、Netflix
C++游戏开发、系统编程、嵌入式系统特斯拉、微软、Adobe
SwiftiOS开发、macOS开发苹果
PHPWeb开发、服务器端脚本、CMSsWordPress、维基百科、雅虎

如果您仔细观察这个表格，您会注意到在

标签内还有一些其他标签；

，

，即表格行，包含在

和

。

这些标签的作用如下：


元素中。

标签可以包含一个或多个

标签中。默认情况下，其内容为粗体。
    • 和

    		元素。
    		• ，即表头，包含在

    ，即表数据，描述表格单元格中的数据内容。

    当您渲染上述代码时，将在浏览器上显示如下内容：

    用于样式化表格的CSS属性

    我们上面创建的表格是完全功能的。然而，它的样式还有待改进。为了实现所需的样式并使表格具有视觉吸引力，我们将使用CSS。

    还记得我们创建的CSS文件吗？现在是使用它的时候了。但是，您必须首先将CSS文件导入到HTML文件中以使样式生效。我们将CSS文件命名为styles.css。在HTML文档的部分中添加以下内容：

    现在我们可以对表格进行样式化了。我们可以按如下方式对其进行样式化：

    #1. 边框

    我们可以在表格的所有单元格周围添加边框。为此，我们将在

    		和

    		元素上定义一个边框属性。我们可以将边框设置为2px。

    th, td {

    border: 2px solid orange;

  }

    我们将边框值设置为2，并将颜色设置为橙色。

    当您渲染新页面时，将会看到以下内容：

    #2. 边框折叠

    如果您观察上面的屏幕截图，您会注意到每个单元格之间存在间隔。border-collapse属性确定表格中相邻单元格是否共享边框。

    如果您希望单元格共享边框，请将以下代码添加到您的CSS文件中：

    table {

  border-collapse: collapse;

}

    当您渲染页面时，可以看到单元格共享边框，如下所示：

    如果您希望单元格具有不同的边框，请将以下内容添加到您的CSS文件中：

    table {

  border-collapse: separate;

}

    渲染后的页面将如下所示：

    #3. 边框间距

    使用border-spacing属性，我们可以在表格的单元格之间创建一个小空间。我们在CSS文件的表格类中设置规则。

    要使此属性生效，我们需要使用border-collapse: separate;属性。

    我们可以将我们的表格类设置如下：

    table {

    border-collapse: separate;

    border-spacing: 3px;

  }

    单元格上的边框间隔为3px。

    当您渲染表格时，它将显示如下：

    #4. 表格布局

    表格布局属性确定表格的性质。您可以创建始终具有相同长度的表格。另一方面，您还可以创建基于内容而变化的表格。

    如果我们希望具有相似大小的单元格，我们可以将table-layout属性设置为fixed。

    table-layout: fixed;

    我们在表格类上的最终代码将为：

    table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

    如果我们想要根据内容更改的单元格，我们可以将table-layout属性更改为auto。

    table-layout: auto;

    我们CSS代码中的最终表格类将是;

    检查表格中的最后一个单元格，并注意我添加了这些词; MailChimp and so much more.

    现在您可以看到最后一行的单元格比其余的单元格更大，因为表格布局根据内容是灵活的。

    到目前为止，我们所涵盖的样式着重于整个表格。现在我们可以通过更改行、单元格或标题的背景颜色、字体和文本对齐属性，来着重于个别类。

    我们可以按以下方式设置这些属性的样式;

    #5. 背景颜色

    我们可以将顶行的背景更改为黄绿色。我们可以使用:first-child伪类选择器来实现我们的目标。

    将以下代码添加到您的CSS代码中;

    tr:first-child {

    background-color: yellowgreen;

  }

    最终显示的代码将如下所示;

    #6. 字体

    我们可以更改表格中特定行、列或单元格的字体样式或字体大小。

    我们将针对我们页面中的最后一列（使用的公司）的内容来更改字体样式。

    我们将通过针对td:last-child类选择器来斜体显示此列中的所有内容。您可以将以下代码添加到您的CSS文件中;

    td:last-child {

  font-style: italic;

}

    当您重新加载渲染的页面时，最终输出将如下所示;

    我们还可以更改第一列的字体颜色和大小，使其与众不同。

    将以下代码添加到您的CSS文件中;

    tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

    当您渲染您的页面时，您将会注意到以下情况;第一列（语言）中的内容具有更大的字体大小，是红色的，并且更加粗体。

    如何使表格响应式

    我们所创建的表格可能对小屏幕不具备响应性。您可以使用Chrome的开发者工具或外部工具（如this）来测试您的代码是否具有响应性。

    有几种方法可以采取，但我们只介绍一种。

    按照以下步骤操作;

    • 在您的代码中设置
      元素的宽度;
      table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}
      • 在td和th上设置word-break，以使单元格中的长单词换行。
      th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

      设计表的最佳实践

      CSS可以是一种有趣的东西，尤其是当您了解它时。以下是一些最佳实践，以确保在样式化表格时获得最佳结果;

      • 使用外部样式表：我们有使用内联样式的选项，但我们选择了外部样式表。我们能够在不同的表格中重用样式，减少开发时间。
      • 保持简洁：你可能会过度为你的表格添加样式。然而，始终保持简单的设计，使你的表格易于浏览和阅读。
      • 为你的表格添加边框：边框使表格易于阅读和浏览。
      • 使用一致的颜色：如果你的网页中有多个表格，请确保使用一致的颜色和字体。使用品牌颜色可以提高品牌的可见性。
      • 使你的表格具有响应性：你可能不知道最终用户设备的屏幕尺寸。
      • 使用标题描述你的表格：标题简要描述表格的内容。
      • 使用空白间隔你的表格：如果多个表格相互跟随，请添加一些空白间隔，并相应地加标题。

      结论

      我相信现在你可以创建和样式化一个基本的HTML表格。我们可能没有涵盖所有内容，因为HTML和CSS都很广泛。你可以根据要捕捉的数据的性质创建较小或较大的表格。

      如果你想了解更多关于CSS以及如何使用它改进你的用户界面的信息，请查看CSS cheat sheets。

      姚伟斌

      程序猿

      我是姚伟斌，也被称为文景。我的专业领域涵盖了开放源代码的深度探索、网络编程和网络建站。我热衷于分享我的编程和建站实践经验，尤其擅长于Nginx和Proxy服务器的管理。此外，我还对Python和NodeJS这两种编程语言有着深刻的理解和独到的见解。

      最近，我致力于爬虫技术的研究，探索如何通过高效的数据抓取为项目增添价值。我的目标是通过持续的学习和创新，为开放源代码社区贡献我的力量，并帮助那些对网络编程和网站建设感兴趣的人士。

      类似文章