次,我們來講解應用 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>
<head></head>
<body></body>
</html>
在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。
head頭部有以下幾種常用標簽:
meta:主要提供有關頁面的元信息。
link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。
title:頁面標題的標簽。
script:用來調用JS文件或JS代碼。當然,script標簽也可以在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>成為了主流,使得開發更加方便。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。