html如何给表格添加样式6

在HTML中，表格是一种非常常见且实用的元素，用于展示数据，为了让表格看起来更加美观和易于阅读，我们可以通过CSS为表格添加样式，下面,我将详细地介绍如何给HTML表格添加样式。

html如何给表格添加样式6

我们需要创建一个基本的HTML表格,以下是示例代码：

Markup

<!DOCTYPE html>
<html>
<head>
    <title>表格样式示例</title>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</htmlth>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>

我们将通过以下几个步骤为表格添加样式：

内联样式

内联样式是最简单的方式，直接在HTML标签中添加style属性。

Markup

<table style="width: 50%; margin: 0 auto;">

这种方法的缺点是样式只对当前表格有效,且代码可读性较差。

内部样式

在<head>标签中添加<style>标签,然后编写CSS样式。

Markup

<head>
    <style>
        table {
            width: 50%;
            margin: 0 auto;
            border-collapse: collapse;
        }
    </style>
</head>

这种方式可以应用到多个表格上,且代码结构更清晰。

外部样式

将CSS样式编写在一个外部文件中，然后在HTML中通过<link>标签引入。

Markup

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

style.css 文件内容：

CSS

table {
    width: 50%;
    margin: 0 auto;
    border-collapse: collapse;
}

以下是具体的样式添加方法：

添加边框

CSS

table, th, td {
    border: 1px solid black;
}

调整宽度

CSS

th, td {
    width: 33.33%;
}

文本对齐

CSS

th, td {
    text-align: center;
}

背景颜色

CSS

tr:nth-child(even) {
    background-color: #f2f2f2;
}

内边距

CSS

th, td {
    padding: 8px;
}

外边距

CSS

table {
    margin-top: 20px;
}

将以上样式应用到我们的HTML表格中,最终效果如下：

Markup

<!DOCTYPE html>
<html>
<head>
    <title>表格样式示例</title>
    <style>
        table {
            width: 50%;
            margin: 0 auto;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid black;
            width: 33.33%;
            text-align: center;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>程序员</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>设计师</td>
        </tr>
    </table>
</body>
</html>