本文目錄導(dǎo)讀：

1. 內(nèi)聯(lián)樣式
2. 外部樣式表

HTML表格與CSS的***結(jié)合

在網(wǎng)頁設(shè)計(jì)中，HTML表格和CSS都是不可或缺的元素，HTML表格用于展示數(shù)據(jù)，而CSS則用于美化網(wǎng)頁，包括表格，如何在HTML表格中加入CSS呢？

內(nèi)聯(lián)樣式

在HTML表格中，可以直接使用style屬性來添加CSS樣式。

<table style="width: 100%; border-collapse: collapse;">
  <tr style="height: 50px; background-color: #f0f0f0;">
    <td style="width: 20%; text-align: left;">列1</td>
    <td style="width: 30%; text-align: center;">列2</td>
    <td style="width: 50%; text-align: right;">列3</td>
  </tr>
  <tr style="height: 50px; background-color: #e0e0e0;">
    <td style="width: 20%; text-align: left;">數(shù)據(jù)1</td>
    <td style="width: 30%; text-align: center;">數(shù)據(jù)2</td>
    <td style="width: 50%; text-align: right;">數(shù)據(jù)3</td>
  </tr>
  <tr style="height: 50px; background-color: #f0f0f0;">
    <td style="width: 20%; text-align: left;">數(shù)據(jù)4</td>
    <td style="width: 30%; text-align: center;">數(shù)據(jù)5</td>
    <td style="width: 50%; text-align: right;">數(shù)據(jù)6</td>
  </tr>
</table>

外部樣式表

除了內(nèi)聯(lián)樣式外，還可以通過外部樣式表來添加CSS樣式，在HTML表格中引入樣式表：

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

在樣式表中添加相應(yīng)的CSS規(guī)則：

table {
  width: 100%;
  border-collapse: collapse;
}
tr {
  height: 50px;
  background-color: #f0f0f0;
}
td {
  width: 20%;
  text-align: left;
}