整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          使用HTML添加表格3(間距與顏色)-零基礎自學網頁制作

          格空間設置

          通過為<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頁面如何寫?——零基礎自學網頁制作

          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>標簽實現文本內鏈接——零基礎自學網頁制作

          顏色設置的簡便方法

          昨天我們在《使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作》(目錄在結尾)中學習了設置單元格以及其中內容的空間間距和背景顏色。

          其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性,而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性,這樣操作起來就非常的麻煩,那有沒有簡便的修改行向單元格背景顏色的方法呢?

          當然有!

          開發團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題,下面讓我們詳細學習。

          <colgroup></colgroup>標簽是一個給行向單元格打組的標簽,在頁面中不會顯示。

          <col></col>標簽是來具體設置行向單元格數量和顏色的標簽。

          示例代碼如下:

          <colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

          這段代碼添加到"第一個頁面.html"當中就可以,具體代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個網頁</title>
            </head> 
            <body>
            <h1>第一個網頁</h1><hr>
            <h2>表格元素</h2><hr>
            <table border="1" width="100%">
            <thead>
            <tr>
            <td colspan="2">表格的頭部信息</td>
            </tr>
            </thead>
            <tfoot>
            <tr>
            <td colspan="2">表格的腳部信息</td>
            <tr>
            </tfoot>
            <tbody>
            <caption>表格標題</caption>
            <colgroup>
            <col span = "1" style="background-color:#ff0000;"></col>
            </colgroup>
            <tr>
            <th>姓名</th>
            <th>年齡</th>
            </tr>
            <tr>
            <td>一列一行</td>
            <td>一列二行</td>
            </tr>
            <tr>
            <td>二列一行</td>
            <td>二列二行</td>
            </tr>
            </tbody>
            </table>
            </body> 
            </html>

          頁面效果如圖:

          因為第一列和最后一列只有一行所以,也都變紅了。

          其中span的數量代表行數。

          如果把span等號后面的數改成2,因為表格只有兩行,所以整個表格都紅了。

          表格嵌套

          我們可以通過向表格中添加表格實現表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。

          代碼示例如下:我們把"一列一行"分割成列向兩個單元格。

          <tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

          使用

          <table border = "1" width="100%">
          
          <tr>
          
          <td>1</td>
          
          <td>2</td>
          
          </tr>
          
          </table>

          這段代碼替換文字"一列一行"即可。

          頁面效果如圖所示:

          留個思考題,大家可以思考一下行向分割單元格怎么寫。

          今天的內容結束了。

          全部示例代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>第一個網頁</title>
            </head> 
            <body>
            <h1>第一個網頁</h1><hr>
            <h2>表格元素</h2><hr>
            <table border="1" width="100%">
            <thead>
            <tr>
            <td colspan="2">表格的頭部信息</td>
            </tr>
            </thead>
            <tfoot>
            <tr>
            <td colspan="2">表格的腳部信息</td>
            <tr>
            </tfoot>
            <tbody>
            <caption>表格標題</caption>
            <colgroup>
            <col span = "1" style="background-color:#ff0000;"></col>
            </colgroup>
            <tr>
            <th>姓名</th>
            <th>年齡</th>
            </tr>
            <tr>
            <td>
            <table border = "1" width="100%">
            <tr>
            <td>1</td>
            <td>2</td>
            </tr>
            </table>
            </td>
            <td>一列二行</td>
            </tr>
            <tr>
            <td>二列一行</td>
            <td>二列二行</td>
            </tr>
            </tbody>
            </table>
            </body> 
            </html>

          喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

          學到這里,相信大家已經有獨立讀懂HTML代碼說明的能力了,明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話,學完16進制顏色表示方法后,基本上就可以無障礙的閱讀html代碼參考手冊了,如果閱讀起來還是有困難,請繼續看后面我為大家講解一些常用元素及屬性的文章,已及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>標簽實現文本內鏈接——零基礎自學網頁制作

          TML 顏色


          HTML 顏色由紅色、綠色、藍色混合而成。


          顏色值

          HTML 顏色由一個十六進制符號來定義,這個符號由紅色、綠色和藍色的值組成(RGB)。

          每種顏色的最小值是0(十六進制:#00)。最大值是255(十六進制:#FF)。

          這個表格給出了由三種顏色混合而成的具體效果:

          1600萬種不同顏色

          三種顏色 紅,綠,藍的組合從0到255,一共有1600萬種不同顏色(256 x 256 x 256)。

          在下面的顏色表中你會看到不同的結果,從0到255的紅色,同時設置綠色和藍色的值為0,隨著紅色的值變化,不同的值都顯示了不同的顏色。



          灰暗色調

          以下展示了灰色到黑色的漸變


          Web安全色?

          數年以前,當大多數計算機僅支持 256 種顏色的時候,一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是,微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色(雙方大約各使用 20 種)。


          我們不確定如今這么做的意義有多大,因為越來越多的計算機有能力處理數百萬種顏色,不過做選擇還是你自己。

          最初,216 跨平臺 web 安全色被用來確保:當計算機使用 256 色調色板時,所有的計算機能夠正確地顯示所有的顏色。


          主站蜘蛛池模板: 无码av免费一区二区三区试看| 亚洲国产精品一区| 国产精品无码一区二区三区免费| 久久精品国产第一区二区| 国产成人高清精品一区二区三区| 亚洲av无码一区二区三区不卡 | 国产SUV精品一区二区88| 一区二区三区中文字幕| 天码av无码一区二区三区四区| 99精品国产一区二区三区2021| 久久精品综合一区二区三区| 精品乱子伦一区二区三区| 国产香蕉一区二区在线网站 | 亚洲国产AV无码一区二区三区| 国产成人综合亚洲一区| 亚洲Av永久无码精品一区二区| 日韩人妻无码一区二区三区久久| 内射白浆一区二区在线观看| 精品国产一区二区三区麻豆| 91精品一区二区综合在线| 中文字幕国产一区| 国产探花在线精品一区二区| 亚洲高清偷拍一区二区三区| 波多野结衣中文一区| 精品在线视频一区| 无码AV动漫精品一区二区免费| 成人精品视频一区二区| 无码人妻一区二区三区兔费| 大帝AV在线一区二区三区| AV天堂午夜精品一区二区三区| 波多野结衣久久一区二区| 国产日韩精品一区二区三区在线| 久久无码AV一区二区三区| 成人毛片无码一区二区| AV无码精品一区二区三区| 在线播放国产一区二区三区 | 精品国产AV无码一区二区三区| 中文字幕一区二区三区5566| 老熟妇仑乱一区二区视頻| 在线观看一区二区三区视频| 日本精品一区二区久久久|