格元素詳解與練習
提到表格,大家最先想到的就是EXCEL這款軟件,實際上在對表格的操作上,HTML與EXCEL非常相似。
在展示數據,統計數據方面,表格比文字描述更具表達優勢,在網頁中,表格也經常被用來展示數據、計劃日常安排等內容。如圖所示:
今天我們就來學習一下如何向頁面中添加表格元素。
首先來介紹一下表格元素中的基本標簽。
NO.1:<table></table>
這個標簽是書寫表格的第一個標簽,它本身在頁面上看不出什么內容,但是它的屬性可以控制表格顯示的全局樣式。這個標簽的開始標簽寫在表格元素的開頭,結尾標簽寫在表格元素的結尾。
NO.2:<caption></caption>
這個標簽是表格的標題標簽。
NO.3:<tr></tr>
這個標簽定義表格的列標簽。
NO.4:<th></th>
這個標簽是列表標題標簽,例如,男生、女士、姓名等。
NO.5:<td></td>
這個標簽定義表格的行標簽。
OK,這些基本標簽就可以構建一個基礎的表格元素。示例代碼如下:
<table><!-- 寫在表格元素的開頭 --><caption>表格標題</caption><!-- 表格標題 --><tr>標題標簽<th>姓名</th><!-- 標題標簽 --><th>年齡</th></tr><tr><td>一列一行</td><td>一列二行</td></tr><tr><td>二列一行</td><td>二列二行</td></tr></table><!-- 寫在表格元素的結尾 -->
頁面效果如圖所示:沒有表格的外邊框。
如何添加外邊框呢?在<table>標簽中修改border屬性即可,示例代碼如下:border="1"是給表格添加寬為1的邊界線。
<table border = "1"><!-- border="1"是給表格添加寬為1的邊界線 -->
效果如圖所示:
這時,您會發現表格在頁面上的尺寸非常小,可不可以按照頁面尺寸來顯示表格嗎?當然可以,這就需要為<table>標簽修改第二個屬性width,示例代碼如圖所示:width = "100%"指的是表格寬度與平面寬度一致。
<table border = "1" width = "100%"><!-- width = "100%"指的是表格寬度與平面寬度一致 -->
效果如圖所示:
ok!今天的講解先到這里,明天我會繼續為大家講解<thead></thead>、<tfoot></tfoot>、<tbody></tbody>三個標簽,以及合并單元格操作。
今天的完整代碼示例如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body><h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%">
<caption>表格標題</caption>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr><td>一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>
正所謂萬丈高樓平地起,html技術雖然簡單,但是內容相對繁瑣,也是以后進一步學習網頁制作的基礎,希望大家動手寫每一段代碼,把每一步踩堅實。
喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
1、表格分析:**表格由 5 行 ,6 列 構成,且第一行第一列為 空。
2、繪制思路:
(1)先畫出第一行第一列,且空著它。
(2)再加一列,寫上周一。
(3)再復制幾個 td 標簽,將周二至周五也繪制出來,此時 “列” 就繪制完了。
(4)繪制行:在下面再復制一行 tr 和 td ,并且添加上文字,此時第 2 行的 第1列也就出來了。此時第一行的第一列的單元格就自動展開了,不用特殊調試。
(5)如法炮制,再復制兩行 tr 和 td ,將第二節和第三節也添加上。
(6)在第 2 行中復制一對 td 標簽添加 html ,這樣,再復制 td 添加 css ,以此表格就繪制出來了。
成品圖標注:↓
5行CSS樣式碼,讓你的表格更加漂亮,先放最終效果:
最終樣式
<table class="style-table">
<thead>
<tr>
<th>序號</th>
<th>物品名稱</th>
<th>金額</th>
<th>備注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>洗衣粉</td>
<td>15.00</td>
<td>自己用</td>
</tr>
<tr class="active-row">
<td>2</td>
<td>潔爾陰</td>
<td>25.00</td>
<td>老婆用</td>
</tr>
<tr >
<td>3</td>
<td>搓衣板</td>
<td>5.00</td>
<td>自己用</td>
</tr>
</tbody>
</table>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。