網(wǎng)頁(yè)中使用表格

表格，曾經(jīng)是網(wǎng)頁(yè)世界的霸主，為什么這么說(shuō)呢？因?yàn)樵缙鸬木W(wǎng)頁(yè)結(jié)構(gòu)，大多數(shù)是通過(guò)大大小小的表格嵌套來(lái)設(shè)置的。后來(lái)被時(shí)間實(shí)踐和 WEB 技術(shù)發(fā)展證實(shí)，這種結(jié)構(gòu)設(shè)置的風(fēng)格，并不適合現(xiàn)代的網(wǎng)頁(yè)開(kāi)發(fā)。無(wú)論是從代碼維護(hù)角度，還是同更新版本的 CSS ， HTML 的結(jié)合使用來(lái)看，都是不再合適作為網(wǎng)頁(yè)結(jié)構(gòu)的主力軍的。

那么問(wèn)題來(lái)了，為什么我們還要設(shè)置這一節(jié)，還要讓大家學(xué)習(xí)這一節(jié)。那是因?yàn)榫W(wǎng)頁(yè)的結(jié)構(gòu)可能不適合大批量的使用表格，但現(xiàn)代網(wǎng)頁(yè)的很多內(nèi)容展現(xiàn)，還是需要表格作為主要支撐的。從內(nèi)容角度說(shuō)，表格體現(xiàn)的是一種成熟的二維數(shù)據(jù)表達(dá)形式。這種表達(dá)形式，在網(wǎng)頁(yè)中展示數(shù)據(jù)，有著清晰，易用，易懂的特點(diǎn)。況且，從實(shí)踐難度上看，表格的插入和設(shè)置并沒(méi)有太多難度，但在當(dāng)今網(wǎng)頁(yè)設(shè)計(jì)中的使用還是很廣泛的。

基于以上的現(xiàn)實(shí)，我們還是非?？梢哉f(shuō)是必須學(xué)習(xí)網(wǎng)頁(yè)中的表格。下面就讓老師帶領(lǐng)大家來(lái)學(xué)習(xí)在網(wǎng)頁(yè)中使用表格的一些知識(shí)。我們本節(jié)將從幾個(gè)角度和內(nèi)容來(lái)介紹表格在網(wǎng)頁(yè)中的使用。第一個(gè)是在網(wǎng)頁(yè)中創(chuàng)建一個(gè)表格，第二個(gè)是對(duì)表格排序，第三個(gè)是利用表格分割頁(yè)面，第四個(gè)是選擇表格。本節(jié)的操作性也很強(qiáng)， 需要大家跟著老師的操作步驟仔細(xì)觀察，多多練習(xí)。

1. 在網(wǎng)頁(yè)中創(chuàng)建一個(gè)表格

在網(wǎng)頁(yè)中創(chuàng)建表格，首先要?jiǎng)?chuàng)建一個(gè)空白的 HTML 文檔。其次，在 Dreamweaver CC 2018 的菜單欄中選擇插入菜單選項(xiàng)，在彈出的下拉菜單中，選擇 table 。沒(méi)錯(cuò)， <table>標(biāo)簽就是表格的標(biāo)簽。我們可以通過(guò)手寫(xiě)代碼的方式在網(wǎng)頁(yè)中添加，一般有智能提示功能的編輯器，在你輸入一個(gè)<table>后都能夠?yàn)槟阕詣?dòng)補(bǔ)全剩余的標(biāo)簽。
創(chuàng)建空白文檔的步驟我們就不再贅述了。我們點(diǎn)擊 table 后彈出了表格的設(shè)置界面。如下面這張圖片所示：

我們?cè)谏厦孢@張圖片里可以看到，首先 table 界面里可以設(shè)置表格的大小，表格的標(biāo)題位置，和一些輔助功能。老師要主要強(qiáng)調(diào)的是表格的行數(shù)列數(shù)，表格的邊框粗細(xì)。因?yàn)榇蠖鄶?shù)時(shí)候，我們表格要表達(dá)的數(shù)據(jù)內(nèi)容確定好之后，下一步就是設(shè)計(jì)表格的基本屬性，這就包括了表格的行數(shù)，列數(shù)和表格樣式等重要屬性。我們按照如圖的標(biāo)準(zhǔn)點(diǎn)擊確定后，可以看到 Dreamweaver CC 2018 已經(jīng)自動(dòng)在屏幕上繪制出了表格。繪制出的表格就像下面的圖片所示。

2. 對(duì)表格排序

對(duì)表格排序可謂是一個(gè)對(duì)排序的快速簡(jiǎn)易操作，這里沒(méi)有太多的麻煩步驟，僅僅需要點(diǎn)擊菜單欄中的編輯，然后選擇表格，在彈出的下一級(jí)菜單中的最后一個(gè)選項(xiàng)叫排序表格。點(diǎn)擊它，就可以輕松地對(duì)表格進(jìn)行排序。由于這個(gè)功能使用的場(chǎng)景并不是很多，在這里大家只需要掌握這個(gè)設(shè)置在 Dreamweaver CC 2018 中的位置就好了。

3. 利用表格分割頁(yè)面

眾所周知，初期的網(wǎng)頁(yè)設(shè)計(jì)都是用表格來(lái)分割頁(yè)面的內(nèi)容和結(jié)構(gòu)。那么作為一節(jié)學(xué)習(xí)表格的知識(shí)點(diǎn)，我們勢(shì)必也要掌握一下，如何用表格來(lái)規(guī)劃網(wǎng)頁(yè)的結(jié)構(gòu)，由于已經(jīng)不怎么用了，所以在這里簡(jiǎn)單給大家說(shuō)一下原理就可以。它的原理就是把表格單元格作為單獨(dú)的區(qū)域，甚至表格與表格之間的嵌套。
我們都知道，在表格中 tr 標(biāo)簽代表了行。
td 標(biāo)簽代表了列。
th 標(biāo)簽代表了標(biāo)題 （ table head ）。
而 tr td th 又都能夠設(shè)置大小，也就是長(zhǎng)度和寬度。那么我們假設(shè)整個(gè)網(wǎng)頁(yè)就是一個(gè)大表格，里面的形形色色的網(wǎng)頁(yè)元素，比如圖片，音頻，視頻，文字都分別位于這些不同尺寸的單元格里，這樣就是利用表格這種 HTML 元素的特性來(lái)實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)化。

4. 選擇表格

有些同學(xué)會(huì)有一些疑問(wèn)，我繪制好了表格如何選中某一個(gè)單元格或者整個(gè)表格呢？在這里我想和大家說(shuō)，這個(gè)技能一定要會(huì)。下面老師就來(lái)講一講如何選中整個(gè)表格。
首先我們可以把鼠標(biāo)光標(biāo)移動(dòng)到任意一個(gè)單元格里單擊一下，然后我們?nèi)ゲ藛螜谏线x擇編輯菜單，然后類(lèi)似上面的操作，點(diǎn)擊表格，我們可以看到在彈出的列表中第一個(gè)就是選擇表格。沒(méi)錯(cuò)，就是這個(gè)選項(xiàng)，如下面的圖片所示。點(diǎn)擊它，我們就會(huì)發(fā)現(xiàn)整個(gè)表格被選中了。
以上就是選中整個(gè)表格的方法。很簡(jiǎn)單。

5. 小結(jié)

本節(jié)為大家介紹了表格在網(wǎng)頁(yè)中的使用，涉及的內(nèi)容比較廣泛，涉及了表格的好幾個(gè)方面。其中的功能我們?cè)诔墒斓纳虡I(yè)網(wǎng)站中既實(shí)用，又常見(jiàn)。

其中創(chuàng)建一個(gè)表格，首先把大家?guī)肓吮砀袷褂玫拇箝T(mén)，這作為基礎(chǔ)，就顯得重中之重！其次，對(duì)表格排序又需要大家對(duì)網(wǎng)頁(yè)內(nèi)容數(shù)據(jù)要有規(guī)劃意識(shí)，結(jié)合網(wǎng)頁(yè)的表格這種數(shù)據(jù)展現(xiàn)方式，才能把數(shù)據(jù)通過(guò)表格透視給用戶(hù)，讓用戶(hù)通過(guò)表格能夠透視出更多的信息。信息的排列決定了人們挖掘信息的難度。有時(shí)是巧合，有時(shí)是必然。

我們使用表格的目的，就是需要離散的數(shù)據(jù)巧合變必然。而使用表格分割頁(yè)面，這里是簡(jiǎn)單的給大家入門(mén)了用表格來(lái)設(shè)置網(wǎng)頁(yè)的結(jié)構(gòu)。這種結(jié)構(gòu)既是空間結(jié)構(gòu)，又是內(nèi)容結(jié)構(gòu)。因?yàn)楫吘箖?nèi)容是靠空間承載的。那么最后，希望大家可以在表格的實(shí)踐應(yīng)用中選擇更多更靈活的表格。靈活的表格種類(lèi)，靈活的表格規(guī)劃，靈活的表格樣式。

本節(jié)知識(shí)點(diǎn)的重點(diǎn)是：能熟練地在網(wǎng)頁(yè)中插入表格。
本節(jié)知識(shí)點(diǎn)的難點(diǎn)是：理解表格分割頁(yè)面的操作。