tft每日頭條

 > 生活

 > html表格内邊框顔色怎麼設置

html表格内邊框顔色怎麼設置

生活 更新时间:2024-07-20 09:27:00
表格空間設置

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)1

通過為<table></table>标簽的cellspacing進行賦值可以調整單元格與單元格之間的空間距離

示例代碼如下:

<table border = "1" width = "100%" cellspacing = "50">

頁面效果如下:

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)2

下面我們删除cellspacing = "50"這段代碼看看變化,如圖:

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)3

通過對比,大家應該明白cellspacing這個屬性的作用了吧。

通過為<table></table>标簽的cellpadding進行賦值可以調整單元格邊框與單元格内容之間的空間距離

示例代碼如下:

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">

頁面效果如下:

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)4

通過與上圖對比,我們不難發現變化。

設置表格顔色

這裡我們要介紹一個全局屬性style,對,你沒看錯!就是freestyle的那個style!英文翻譯過來是"樣式"、"風格"的意思。我們通過這個屬性可以為表格設置顔色。實際上,可以為任何html元素設置顔色、大小、排列等不同屬性!

值得一提的是把style信息如果寫到一個獨立文件中,并保存為css文件,就是以後我們要學的CSS層疊樣式列表了。

這裡我們先來簡單了解一下它作為HTML的一個全局屬性的用法。

示例代碼如下:

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">

頁面效果如圖所示:

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)5

我們來分析一下這段代碼,寫法和其他屬性大同小異。

首先也是才有"屬性"="數值"的寫法,具體是: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>

頁面效果如圖所示:

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)6

下面我們為"一列一行"、"二列一行"賦予紅色。

示例代碼如下:

<tr> <td style = "background-color: #ff0000;">一列一行</td> <td>一列二行</td> </tr> <tr> <td style = "background-color: #ff0000;">二列一行</td> <td>二列二行</td> </tr>

頁面效果如下:

html表格内邊框顔色怎麼設置(使用HTML添加表格3間距與顔色)7

今天的内容到此結束了,一下是今天示例的全部代碼:

<!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>标簽實現文本内鍊接——零基礎自學網頁制作

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved