通過為<table></table>標簽的cellspacing進行賦值可以調整單元格與單元格之間的空間距離。
示例代碼如下:
<table border = "1" width = "100%" cellspacing = "50">
頁面效果如下:
下面我們刪除cellspacing = "50"這段代碼看看變化,如圖:
通過對比,大家應該明白cellspacing這個屬性的作用了吧。
通過為<table></table>標簽的cellpadding進行賦值可以調整單元格邊框與單元格內容之間的空間距離。
示例代碼如下:
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">
頁面效果如下:
通過與上圖對比,我們不難發現變化。
設置表格顏色
這里我們要介紹一個全局屬性style,對,你沒看錯!就是freestyle的那個style!英文翻譯過來是"樣式"、"風格"的意思。我們通過這個屬性可以為表格設置顏色。實際上,可以為任何html元素設置顏色、大小、排列等不同屬性!
值得一提的是把style信息如果寫到一個獨立文件中,并保存為css文件,就是以后我們要學的CSS層疊樣式列表了。
這里我們先來簡單了解一下它作為html的一個全局屬性的用法。
示例代碼如下:
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
頁面效果如圖所示:
我們來分析一下這段代碼,寫法和其他屬性大同小異。
首先也是才有"屬性"="數值"的寫法,具體是:style=""
是不是和其他屬性寫法一樣?
但是到了雙引號里面就不同了,比如width屬性只需要為其賦值就可以,比如width="100%"。
而style是在雙引號里面再指定屬性。例如:style="background-color"。
然后我們再為background-color(背景顏色)屬性賦值。
這時,賦值的寫法就發生變化了,不是使用=號,而是使用:。
例如style="background-color : #00ffff;"
大家注意的是為其賦值后,要用;結尾。這個;必須要添加,因為,通過style可以指定多個不同的樣式屬性,在指定多個樣式屬性時,我們使用;分割。
#00ffff這個符號是色彩的16進制表示方法,這個顏色是藍色。
#000000這個符號的顏色是黑色。
#ffffff這個符號是白色。
這個顏色的算法我們會在下一期中詳細講解,感興趣的小伙伴請關注!
大家想一想。如何為一列單元格指定背景顏色呢?
示例代碼如下:我們為表格標題欄賦予綠色。
<tr style = "background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>
頁面效果如圖所示:
下面我們為"一列一行"、"二列一行"賦予紅色。
示例代碼如下:
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
頁面效果如下:
今天的內容到此結束了,一下是今天示例的全部代碼:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>表格元素</h2><hr>
<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
<caption>表格標題</caption>
<tr style = "background-color: #00ff00;">
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td style = "background-color: #ff0000;">一列一行</td>
<td>一列二行</td>
</tr>
<tr>
<td style = "background-color: #ff0000;">二列一行</td>
<td>二列二行</td>
</tr>
</table>
</body>
</html>
明天將繼續為大家講解頁面制作中16進制的顏色指定方式和另外一種表格顏色指定方式。
喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
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>標簽實現文本內鏈接——零基礎自學網頁制作
嘍大家好,我是作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!
志同道合的小伙伴跟我一起學習交流哦!
因為在的編輯中“<”和“>”中的內容都會被識別為代碼,顯示不出來內容,所以,在文本中會省略“<”和“>”,圖片中的“<”和“>”不會省略。
1 表格table(會使用)
在HTML網頁中,要想創建表格,就需要使用表格相關的標簽。創建表格的基本語法格式如下:
2 表格的注意事項
1 tr和 /tr中只能嵌套td和/td標簽
2 td和/td標簽,他就像一個容器,可以容納所有的元素
3 表格屬性
使用方法:
4 表頭標簽
只需用表頭標記th和/th替代相應的單元格標記td和/td即可。
顯示效果為加粗和居中。
5 表格結構(了解)
在使用表格進行布局時,可以將表格劃分為頭部、主體和頁腳(頁腳因為有兼容性問題,我們不在贅述),具體如下所示:
1 thead和/ thead:用于定義表格的頭部。
2 必須位于table和/ table標簽中,一般包含網頁的logo和導航等頭部信息
3 tbody和/ tbody:用于定義表格的主體。
4 位于
*請認真填寫需求信息,我們會在24小時內與您取得聯系。