整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
不改變代碼的情況下，通過CSS樣式表在手機上展示表格內容
PC端
移動端
HTML源碼
CSS處理的主要方法是：
假定table的class是 the-table，CSS示例代碼如下：
reamweaver的CSS面板分類
type(類型)
background(背景)
block(區塊)
box(方框) 或盒子意思
border(邊框)
list(列表)
positioning(定位)
extensions(擴展)
共八個部分
1. type(類型)
type面板主要是對文字的字體，大小，顏色，效果等基本樣式進行設置。
注意：屬性名帶*號的是指樣式效果不能在編輯文檔時顯示，要用瀏覽器打開才能看到效果。
(1)font-family：設置字體系列。什么叫字體系列呢?是指對文字設定幾個字體，當遇到第一個字體不能顯示的文字時會自動用系列中的第二個
字體或后面的字體顯示。
注意:一般英文字體我們用"Verdana, Arial, Helvetica, sans-serif"這個系列比較好看。如果不用這些字體系列，你就需要自己編輯字體系列，
也可以直接手動在下拉框里寫字體名，字體之間用逗號隔開。中文網頁默認字體是宋體, 一般就空著不要選取任何字體。
默認值： not specified(取決于瀏覽器,系統默認的字體, 如: 微軟雅黑)
注意：
1.如果有漢字, 那么我們要加引號
2.如果有多個英文字母組成的單詞, 我們也要加引號; "microsoft yahei" 中間用空格隔開
3.font-family:"黑體","宋體","華文隸書"; 首先找黑體, 沒有黑體找宋體...
為了避免在CSS中使用 font 或 font-family 設置中文字體時亂碼, 可以使用 Unicode 編碼來表示字體。
/* 示例:使用Unicode字體編碼設置字體為"微軟雅黑" */
font-family: "\5FAE\8F6F\96C5\9ED1";(2)font-size：定義文字的大小。你可以通過選取數字和度量單位來選擇具體的字體大小，或者你也可以選擇一個相對的字體大小。
最好使用pixels作為單位，這樣不會在瀏覽器中文本變形。一般字體用比較標準的12px或14px, 默認值為16px。
注意：CSS中長度的單位分絕對長度單位和相對長度單位:
絕對長度單位有：
pt：磅(point)
mm、cn、in、pc：(毫米、厘米、英寸、活字)根據顯示的實際尺寸來確定長度。
此類單位不隨顯示器的分辨率改變而改變。
相對長度單位有：
px：(像素)根據顯示器的分辨率來確定長度。
em：當前文本的尺寸。例如：{font-size:2em}是指文字大小為原來的2倍。
比如自身font-size: 30px; 那么此時1em=30px;
ex：當前字母"x"的高度，一般為字體尺寸的一半。
%：是以當前文本的百分比定義尺寸。例如：{ font-size:300%}是指文字大小為原來的3倍。
small、large：表示比當前小一個級別或大一個級別的尺寸。
默認值：medium(標準大小)
(3)font-style：定義字體樣式為normal、italic、oblique。默認設置為normal。
注意： italic 斜體 oblique 歪斜體 italic和oblique實際效果是一樣的。
默認值:normal
(4)line-height：設置文本所在行的行高。默認為normal。可以是行內元素、行內塊元素, 通常與height設置的高度值相同, 可以做到垂直居中的作用。
你也可以自己鍵入一個精確的數值并選取一個計量單位。
比較直觀的寫法用百分比, 例如140%是指行高等于文字大小的1.4倍。
最常用的方法: line-height:1.5em; /*行間距,相對數值,1.5倍行距,*/ 可有效的避免文字發生重疊
默認值： normal
(5)text-decoration：在文本中添加underline(下劃線)、overline(上劃線)、line-through(中劃線)、blink(閃爍效果)。
這些效果可以同時存在，將效果前的復選框選定即可。
注意：鏈接的默認設置是underline，我們可以通過選none去除下劃線。blink(閃爍效果)只在mozilla瀏覽器里可以看到, IE、opera不支持
默認值： none
(6)font-weight：給字體指定粗體字的磅值。
normal 默認值。定義標準的字符。
bold 定義粗體字符。
bolder 定義更粗的字符。
lighter 定義更細的字符。
100
200
300
400
500
600
700
800
900
inherit 規定應該從父元素繼承字體的粗細。
定義由粗到細的字符。400 等同于 normal, 而 700 等同于 bold。
默認值: normal
(7)font-variant：允許你選取字體的變種, 選small-caps(小型大寫字母)時, 此樣式區域內所有字母大寫。
normal表示正常的字體, 為默認值；
默認值: normal
(8)text-transform：將選區中每個單詞的第一個字母轉為大寫, 或者令單詞全部大寫或全部小寫。
參數：capitalize(單詞首字母大寫)、uppercase(轉換成大寫)、lowercase(轉換成小寫)、none(不轉換)。
默認值：none
(9)color：定義文字顏色。包括對表單輸入的文字顏色。
CSS中顏色的值有三種表示方法：
#RRGGBB格式，是由紅綠藍三種顏色的值組合，每種顏色的值為"00 – FF"的兩位十六進制正整數。
例如：#FF0000表示紅色，#FFFF00表示黃色。
rgb(R,G,B)格式, RGB為三色的值, 取0~255, 例如：rgb(255,0,0)表示紅色, rgb(255,255,0)表示黃色。
用顏色名稱。CSS可以使用已經定義好的顏色名稱。例如：red表示紅色, yellow表示黃色。
顏色值的縮寫:
p{color:#000000} 可以縮寫為：p{color:#000}
p{color:#336699} 可以縮寫為：p{color:#369}
默認值： not specified
color: transparent; 透明色
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1)
注意: 如果文字的顏色通過單獨的類選擇去設置沒有改變顏色, 則應該通過組合選擇器(.header .top .topR .blue)去設置, 改變它的優先級。
2. background(背景)
background面板主要是對元素的背景進行設置，包括背景顏色、背景圖象、背景圖象的控制。
一般是對body(頁面)、table(表格)、div(區域)的設置。
(1)background-color：設置元素的背景色。包括對input表單輸入框的背景顏色;
默認值: transparent(背景顏色為透明)
rgba() 解釋: rgba(紅0-255, 綠0-255, 藍0-255, 透明度0-1) 一般用于背景色
(2)background-image：設置元素的背景圖像。
默認值:none
CSS3支持多重背景圖,只要加上一個url指定圖片路徑,并用逗號(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);base64使用
background-image: url("data:image/png;base64,iVBORw0KGgo=...");(3)background-repeat：確定背景圖像是否以及如何重復。
repeat 默認值。背景圖像將在垂直方向和水平方向重復。
repeat-x 背景圖像將在水平方向重復。
repeat-y 背景圖像將在垂直方向重復。
no-repeat 背景圖像將僅顯示一次。
inherit 規定應該從父元素繼承background-repeat屬性的設置。
注意：如果定義的元素的body，可以控制頁面背景是否重復。
默認值: repeat
(4)background-attachment：固定背景圖像或者跟隨內容滾動。
參數fixed表示固定背景(不隨屏幕滾動而滾動，決定背景圖像是否要固定在原來的位置), scroll表示跟隨內容滾動的背景。
注意：如果定義的元素的body, 可以使頁面背景固定。
默認值: scroll
(5)background-position(X)：指定背景圖像的水平位置。
可以指定為left(左邊), center(居中)，right(右邊)；
也可以指定數值，如20px是指背景距離左邊20象素。
background-position(Y)：指定背景圖像的垂直位置。
可以指定為top(頂部), center(居中), bottom(底部)；也可以指定數值。
background-position屬性值:
left top
center top
right top
left center
center center
right center
left bottom
center bottom
right bottom
如果您僅規定了一個關鍵詞，那么第二個值將是"center"。
注意:采用英文單詞的水平位置和垂直位置的屬性值可以調換
x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規定了一個值，另一個值將是 50%。
xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。
如果您僅規定了一個值，另一個值將是50%。
您可以混合使用 % 和 position 值。
默認值：0% 0%
篇文章介紹了div標簽的作用，我們這篇文章主要來看下過氣表格標簽table的語法與使用。
在div沒有出現之前，table曾是做網頁的中堅力量。記得在開始學網頁的時候，div是神馬，我不造呀！做網頁還用div嗎，就只用table就可以了，各種表格嵌套加嵌套，一個網頁就拼湊出來了。但table寫的布局頁面做維護就比較令人頭痛欲裂了。因為table是一層一層嵌套，標簽量冗余過多。所以修改起來就是動一發而牽全身。維護起來格外麻煩，往往是拆東墻補西墻。所以它后來就慢慢被div所替代。但是在數據列表上還是用table形式來寫比較的合理，所以現在table多用于網站后臺的表格數據處理中。
簡單的表格由table元素以及一個或多個tr（行標簽）、th（表頭單元格標簽）、td（普通單元格標簽）等標簽所組成，當然復雜的表格還包括caption（表格標題）、col(定義列)、colgroup(對表格中的列進行組合)、thead（組合表頭的內容）tbody(組合表格的主題內容)、tfoot(組合表格的腳注內容)等這里我們先簡單了解下即可。
定義表格：<table></table>
創建表行：<tr></tr>
創建列(單元格):<th></th>（表頭）、<td></td>（表格單元）
注意：默認情況下，每行中的列數是統一的。
比如我們想創建一個姓名、年齡、分數和日期的數據表格，并設置border為1，我們可以使用table來制作。具體的表格代碼如下圖所示：
在網頁中呈現的效果就如下圖所示：
這時候有的人就會說了，為什么這個表格看起來這么奇怪，邊框都是有空隙的呢？我們只需要給表格添加一些特殊的樣式，即可制作一個比較漂亮好看的表格了。添加的樣式代碼：
在網頁中呈現的效果就如下圖所示：
現在我們的表格是不是看著比較的清新了，上面的css代碼中為表格添加了背景、邊框以及去掉了粗的邊線。具體的css代碼我們會在以后的課程中為大家介紹，大家在這里只需要知道并了解table標簽的作用以及使用就可以了。沒事可以多用table寫一寫表格，熟能生巧。
附贈一句經典語錄：每天早上，你有兩個簡單的選擇：是睡回籠覺，還是起身追逐 夢想 。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
