制作表格并使用CSS美化.ppt

5、“合并單元格”按鈕；要拆分單元格，可將插入點(diǎn)置于要拆分的單元格中，然后單擊“屬性”面板中的“拆分單元格”按鈕，在彈出對(duì)話框中選擇需要拆分為的單元格類型，并輸入要拆分為的行數(shù)和列數(shù)，然后單擊“確定”按鈕即可。三、使用CSS設(shè)置表格或單元格顏色使用CSS設(shè)置單元格內(nèi)文字的顏色，以及表格或單元格的背景的方法與我們?cè)陧?xiàng)目三和項(xiàng)目四中學(xué)習(xí)的設(shè)置文字顏色和網(wǎng)頁元素背景相同。例如，可以使用color屬性設(shè)置單元格內(nèi)文字顏色；使用background-color屬性設(shè)置單元格、行或表格背景顏色；使用background-

6、image屬性設(shè)置表格、行或單元格背景圖片。四、使用CSS設(shè)置表格或單元格大小和邊框同樣，使用CSS設(shè)置表格或單元格大小和邊框等的操作與我們?cè)陧?xiàng)目四中學(xué)習(xí)的設(shè)置圖片和其他塊元素相同。例如，可以使用width屬性設(shè)置整個(gè)表格或單元格寬度；使用height屬性設(shè)置整個(gè)表格或行的高度；使用border屬性設(shè)置表格或單元格的邊框。如代碼table{border:1pxsolidred;}，表示設(shè)置整個(gè)表格的邊框粗細(xì)為1像素，實(shí)線，紅色。任務(wù)二制作日歷單元格——使用CSS控制表格進(jìn)階通過前面的學(xué)習(xí)，大家已大致了解了

7、一個(gè)表格應(yīng)該有什么樣的表現(xiàn)形式。下面，我們?cè)偻ㄟ^制作一個(gè)表格形式的月歷（以2012年9月為例），此月歷的基本結(jié)構(gòu)如下圖所示，顯示效果為：8月及10月的部分日期顏色為灰色，而9月的日期顏色為黑色；當(dāng)將鼠標(biāo)指針移動(dòng)到單元格上時(shí)單元格的顏色會(huì)發(fā)生變化。支撐知識(shí)點(diǎn)一、使用CSS設(shè)置網(wǎng)頁元素的內(nèi)邊距和外邊距在前面的學(xué)習(xí)中，我們已經(jīng)多次接觸到了CSS的margin和padding屬性。其中，margin屬性用來設(shè)置元素的外邊距，即元素與其他相鄰元素之間的間距；padding屬性用來設(shè)置元素的內(nèi)邊距（也稱填充），即元素

8、內(nèi)容與元素邊框之間的空間。二、使用CSS合并表格邊框使用CSS設(shè)置單元格邊框時(shí)，假設(shè)為每個(gè)單元格都設(shè)置邊框?qū)挾葹?px，那么當(dāng)兩個(gè)單元格都相鄰的時(shí)候，相鄰邊的邊框?qū)挾葘?shí)際上是1px+1px=2px。為了避免此情況發(fā)生，或?yàn)榱吮苊鈫卧裰g出現(xiàn)空隙，可使用border-collapse屬性將表格相鄰的邊框合并。border-collapse屬性的基本語法為：border-collapse:separate

9、collapse

10、in