零基礎教你學前端-89、CSS表格

次，我們來講解應用 CSS 來裝飾表格。

如何制作一個表格，我們在HTML課程中已經學習過了。現在，我們通過樣式，讓表格變得更加美觀易用。

首先來學習如何定義表格邊框。

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

創建 tables.html 文件和 tables-style.css 文件。在 html 里構建基礎代碼，引入外部樣式。

在 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學習指南》</td>
    </tr>
    <tr>
      <td>Kerwin</td>
      <td>《Vue2+Vue3全套教程》</td>
    </tr>
  </table>

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

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

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

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

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

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

此時，表格線變細了。

CSS
table {
  border-collapse: collapse;
}

當前表格看起來很小，如果我們需要一個橫跨整個屏幕的表格，該如何實現呢？

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

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

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

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

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

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

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

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

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

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

要使內容左對齊，可以使用 text-align: left 屬性。

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

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

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

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

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

接下來，給表格添加內填充、水平分隔線、鼠標滑過高亮及顏色等樣式。

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

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

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

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

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

注釋掉原有的 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;
}

我們看，水平分隔線的表格效果就實現了。

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

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

當鼠標滑過每一行時，當前行就高亮顯示了。

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

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

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

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

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

果想開發一個網站，除了要精通后端開發語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標記語言，它包含有眾多的標簽，我們可以通過這些標簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個統一的文檔中，這就形成了我們可以看得見的網頁。那么，HTML都有哪些常用的標簽呢？

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標簽。

這個標簽是html最外層的標簽，所有其它的HTML標簽都要放在這個標簽的內部。

<html>

</html>

三、雙標簽和單標簽。

在HTML標簽中，有的標簽是成雙成對的，如：<html></html>（如下圖）；而有的標簽是單個的，如：<hr>橫線標簽。

四、head頭部標簽。

head頭部有以下幾種常用標簽：

meta：主要提供有關頁面的元信息。

link：用來定義文檔與外部資源的關系，最常用的是調用CSS樣式文件。

title：頁面標題的標簽。

script：用來調用JS文件或JS代碼。當然，script標簽也可以在body主體中使用。

五、body主體標簽。

1、塊級標簽。

塊級標簽的特性是：獨自占有一行；標簽的高與寬、邊距可以修改；沒有設置寬與高時，默認繼承父標簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內聯標簽。

內聯標簽與塊級標簽不同，它不能獨自占有一行，會與其它內聯標簽在同一樣展示；內聯標簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內聯標簽有：span、a、b、strong、i、em 。

3、內聯塊級標簽。

內聯塊級標簽，既有一些內聯標簽的特性，也有一些塊級標簽的特點：它不能獨自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個圖片不能獨自占有一行，而是在同一行。如下圖：

常用的內聯塊級標簽有：img、input、textarea。

4、區域標簽。

所謂區域標簽，就是主要用來劃分布局頁面區域的。如：頭部、主體內容、側邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區域標簽有：header（頭部）、footer（底部）、nav（導航）、aside（側邊欄）、section（主體）、article（獨立內容）。

5、表單標簽。

這個表單標簽我們也是會經常用到的，如：登錄網站的時候、提交數據的時候。如下圖的評論表單：

?表單常用的標簽有：form、input、select、option、textarea 。

以上就是我們開發網頁時，會常用到的HTML標簽。當然，HTML標簽遠不止這些，尤其是html5出來后，新增了許多的新標簽。但是，有些標簽在我們開發中很少用到，所以，這里就沒有做相應的介紹。

OCTYPE（文檔類型聲明）是放置于HTML或XHTML文檔開頭的指令，用于指示瀏覽器使用哪種解析模式來渲染頁面。它告訴瀏覽器使用的是哪個HTML或XHTML版本的規范，并且幫助瀏覽器正確地渲染和解析當前頁面內容。

在HTML5中，DOCTYPE聲明相對簡潔，通常只需要寫<！DOCTYPE html>。這是因為HTML5引入了更寬松的解析模式，使得開發者不再需要嚴格地遵循XHTML那樣的規則。而在過去的HTML或XHTML版本中，DOCTYPE聲明可能會更加復雜。

在XHTML 1.0 Strict規范中，DOCTYPE聲明需要包含<IDOC TYPE html PUBLIC-// W3C//DTD XHTML 1.0 Strict// EN ttp：// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>。

DOCTYPE的作用包括：

1. 渲染模式指定：DOCTYPE聲明決定了瀏覽器選擇使用哪種渲染模式，如標準模式（Artist Mode）或怪異模式。

2. DOCTYPE聲明指示了頁面使用的是哪個HTML或XHTML版本的規范，從而幫助瀏覽器正確地解析頁面。

3. 瀏覽器兼容性：DOCTYPE聲明有助于確保頁面在不同瀏覽器中以一致的方式渲染，從而提高跨瀏覽器兼容性。

總的來說，DOCTYPE聲明是確保你的網頁在各種瀏覽器中正確顯示的關鍵。在現代Web開發中，隨著HTML5的普及，簡潔的<！DOCTYPE html>成為了主流，使得開發更加方便。

在線咨詢

上一篇：HTML5新增了哪些結構標簽？
下一篇：實在！基于Springboot和WebScoket，

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。