次，我們來講解應(yīng)用 CSS 來裝飾表格。

如何制作一個表格，我們在HTML課程中已經(jīng)學(xué)習(xí)過了。現(xiàn)在，我們通過樣式，讓表格變得更加美觀易用。

首先來學(xué)習(xí)如何定義表格邊框。

要在CSS中指定表格的邊框，可以使用 border 屬性。我們來舉個例子。

創(chuàng)建 tables.html 文件和 tables-style.css 文件。在 html 里構(gòu)建基礎(chǔ)代碼，引入外部樣式。

在 body 里編寫 emmet 命令：table>(tr>th*2)+(tr>td*2)*3，填入一些文本。

HTML
<table>
    <tr>
      <th>千鋒名師</th>
      <th>最新作品</th>
    </tr>
    <tr>
      <td>浠浠呀</td>
      <td>《HTML+CSS前端入門》</td>
    </tr>
    <tr>
      <td>陸榮濤</td>
      <td>《Vite學(xué)習(xí)指南》</td>
    </tr>
    <tr>
      <td>Kerwin</td>
      <td>《Vue2+Vue3全套教程》</td>
    </tr>
  </table>

在瀏覽器里預(yù)覽效果：表格的結(jié)構(gòu)有了，還沒有邊框。大家還記得如何通過 html 屬性定義邊框嗎？可以評論上告訴我。

現(xiàn)在，我們通過樣式來給表格添加邊框。定義群組選擇器 table, th, td，聲明樣式：border: 1px solid。

再看效果，表格線出現(xiàn)了，可是外觀上看，線條有點粗。是因為 table、th和td元素都有獨立的邊框。

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

可以應(yīng)用 border-collapse 屬性，把表格的邊框折疊成一個單一的邊框。

回到 CSS，再給 table 元素聲明樣式：border-collapse: collapse。

此時，表格線變細(xì)了。

CSS
table {
  border-collapse: collapse;
}

當(dāng)前表格看起來很小，如果我們需要一個橫跨整個屏幕的表格，該如何實現(xiàn)呢？

回到CSS，再給 table 添加樣式 width: 100%。

再看一下效果，表格橫向撐滿了整個屏幕。

接下來，我們來定義表格的寬度和高度。

width 和 height 屬性用來定義表格的寬度和高度。我們來實驗一下。

將 table 的 width 屬性修改為 50%，再給 th 聲明樣式 height: 70px。

我們看，表格寬度縮小了一半，同時表頭的高度也變大到 70px 了。

接下來，我們來設(shè)置表格的對齊方式。

text-align 屬性用來設(shè)置 th 或 td 中內(nèi)容的水平對齊方式，如居左、居右或居中對齊。默認(rèn)情況下，th 元素的內(nèi)容是居中對齊的，td 元素的內(nèi)容是左對齊的。要使 td 元素的內(nèi)容也居中對齊，可以使用text-align: center。舉個例子：

回到CSS，給 td 添加樣式：text-align: center。

此時，全部 td 里的內(nèi)容在單元格里水平居中顯示了。

要使內(nèi)容左對齊，可以使用 text-align: left 屬性。

比如將 th 元素的對齊方式改為左對齊。

CSS
th {
  height: 70px;
  text-align: left;
}

vertical-align 屬性用來設(shè)置 th 或 td 中內(nèi)容的垂直對齊方式。如頂部對齊、底部對齊或中間對齊。默認(rèn)情況下，對于 th 和 td 元素，表格中內(nèi)容的垂直對齊方式是中間對齊。舉個例子：

回到 CSS，給 td 添加樣式：height: 50px，vertical-align: bottom。

我們看， td 單元格里的內(nèi)容垂直底部對齊了。

接下來，給表格添加內(nèi)填充、水平分隔線、鼠標(biāo)滑過高亮及顏色等樣式。

要控制表格中邊框和內(nèi)容之間的空間，可以給 td 和 th 元素設(shè)置 padding 屬性。

回到 CSS，先注釋掉 th 和 td 的樣式。定義選擇器 th, td，聲明樣式：padding: 15px，text-align: left。

CSS
th, td {
  padding: 15px;
  text-align: left;
}

看一下效果，內(nèi)容和邊框線之間就具有了 15px 的填充。

接下來通過給 th 和 td 添加 border-bottom 屬性，實現(xiàn)表格的水平分隔線效果。

注釋掉原有的 border 屬性，給 th 和 td 添加樣式：border-bottom: 1px solid #ddd。

CSS
table, th, td {
  /* border: 1px solid; */
}
th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

我們看，水平分隔線的表格效果就實現(xiàn)了。

在 tr 上使用 :hover 選擇器，在鼠標(biāo)移過時突出顯示表格的行。

回到CSS，定義選擇器 tr:hover，聲明樣式：background-color: coral。kerou

當(dāng)鼠標(biāo)滑過每一行時，當(dāng)前行就高亮顯示了。

我們也可以專門給某一行添加背景色，比如給 th 添加一個綠色背景。

再單獨給 th 定義樣式：background-color: #04AA6D，color: white;

CSS
th {
  background-color: #04AA6D;
  color: white;
}

這樣，通過給 th 添加背景色，使表頭的顯示更加醒目了。

本文配套教程鏈：https://www.bilibili.com/video/BV1oU4y1278g?p=101

lt;table>元素是HTML中最復(fù)雜的結(jié)構(gòu)之一。要想創(chuàng)建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標(biāo)簽。由于涉及的標(biāo)簽多，因而使用核心DOM方法創(chuàng)建和修改表格往往都免不了要編寫大量的代碼。假設(shè)我們要使用DOM來創(chuàng)建下面的HTML表格。
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>

要使用核心DOM方法創(chuàng)建這些元素，得需要像下面這么多的代碼：
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創(chuàng)建第一行
var row1 = document.createElement("tr");
tbody.appendChild(row1);
var cell1_1 = document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1 = document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//創(chuàng)建第二行
var row2 = document.createElement("tr");
tbody.appendChild(row2);
var cell1_2 = document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2= document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//將表格添加到文檔主體中
document.body.appendChild(table);

顯然，DOM代碼很長，還有點不太好懂。為了方便構(gòu)建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。

caption：保存著對<caption>元素（如果有）的指針。
tBodies：是一個<tbody>元素的HTMLCollection。
tFoot：保存著對<tfoot>元素（如果有）的指針。
tHead：保存著對<thead>元素（如果有）的指針。
rows：是一個表格中所有行的HTMLCollection。

createTHead()：創(chuàng)建<thead>元素，將其放到表格中，返回引用。
createTFoot()：創(chuàng)建<tfoot>元素，將其放到表格中，返回引用。
createCaption()：創(chuàng)建<caption>元素，將其放到表格中，返回引用。
deleteTHead()：刪除<thead>元素。
deleteTFoot()：刪除<tfoot>元素。
deleteCaption()：刪除<caption>元素。
deleteRow(_pos_)：刪除指定位置的行。
insertRow(_pos_)：向rows集合中的指定位置插入一行。
為<tbody>元素添加的屬性和方法如下。
rows：保存著<tbody>元素中行的HTMLCollection。
deleteRow(pos)：刪除指定位置的行。

insertRow(pos)：向rows集合中的指定位置插入一行，返回對新插入行的引用。
為<tr>元素添加的屬性和方法如下。
cells：保存著<tr>元素中單元格的HTMLCollection。
deleteCell(pos)：刪除指定位置的單元格。
insertCell(pos)：向cells集合中的指定位置插入一個單元格，返回對新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創(chuàng)建表格所需的代碼數(shù)量。例如，使用這些屬性和方法可以將前面的代碼重寫如下（加陰影的部分是重寫后的代碼）。
//創(chuàng)建table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

//創(chuàng)建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

//創(chuàng)建第一行tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));//創(chuàng)建第二行tbody.insertRow(1);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//將表格添加到文檔主體中
document.body.appendChild(table);

在這次的代碼中，創(chuàng)建<table>和<tbody>的代碼沒有變化。不同的是創(chuàng)建兩行的部分，其中使用了HTML DOM定義的表格屬性和方法。在創(chuàng)建第一行時，通過<tbody>元素調(diào)用了insertRow()方法，傳入了參數(shù)0——表示應(yīng)該將插入的行放在什么位置上。執(zhí)行這一行代碼后，就會自動創(chuàng)建一行并將其插入到<tbody>元素的位置0上，因此就可以馬上通過tbody.rows[0]來引用新插入的行。
創(chuàng)建單元格的方式也十分相似，即通過<tr>元素調(diào)用insertCell()方法并傳入放置單元格的位置。然后，就可以通過tbody.rows[0].cells[0]來引用新插入的單元格，因為新創(chuàng)建的單元格被插入到了這一行的位置0上。
總之，使用這些屬性和方法創(chuàng)建表格的邏輯性更強，也更容易看懂，盡管技術(shù)上這兩套代碼都是正確的。

想要了解更多Java基礎(chǔ)知識，可以點擊評論區(qū)鏈接和小編一起學(xué)習(xí)java吧，此視頻教程為初學(xué)者而著，零基礎(chǔ)入門篇！給同學(xué)們帶來全新的Java300集課程啦!java零基礎(chǔ)小白自學(xué)Java必備優(yōu)質(zhì)教程_手把手圖解學(xué)習(xí)Java，讓學(xué)習(xí)成為一種享受_嗶哩嗶哩_bilibili

?