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

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

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

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

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

在網(wǎng)頁中創(chuàng)建表格，首先要創(chuàng)建一個空白的 HTML 文檔。其次，在 Dreamweaver CC 2018 的菜單欄中選擇插入菜單選項，在彈出的下拉菜單中，選擇 table 。沒錯， <table>標簽就是表格的標簽。我們可以通過手寫代碼的方式在網(wǎng)頁中添加，一般有智能提示功能的編輯器，在你輸入一個<table>后都能夠為你自動補全剩余的標簽。
創(chuàng)建空白文檔的步驟我們就不再贅述了。我們點擊 table 后彈出了表格的設置界面。如下面這張圖片所示：

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

2. 對表格排序

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

3. 利用表格分割頁面

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

4. 選擇表格

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

5. 小結(jié)

本節(jié)為大家介紹了表格在網(wǎng)頁中的使用，涉及的內(nèi)容比較廣泛，涉及了表格的好幾個方面。其中的功能我們在成熟的商業(yè)網(wǎng)站中既實用，又常見。

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

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

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