一旦你理解了行和列的基礎知識,並且一旦你明白什麼時候可以使用表格以及什麼時候應該避免它們,HTML表格很容易創建。
表格和網頁設計簡史
許多年前,在CSS和Web標準可接受之前,Web設計人員使用HTML
元素為網站創建頁面佈局。 網站設計將被“切成”小塊,如拼圖,然後與HTML表格一起在瀏覽器中按照預期呈現。 這是一個非常複雜的過程,它創建了大量額外的HTML標記,並且在我們的網站所處的多屏世界中 ,這些標記永遠無法使用。 隨著CSS成為網頁視覺效果和佈局的可接受方法,使用表格避免了這種情況,許多網頁設計師錯誤地認為“表格很糟糕”。 那是並且是不真實的。 用於佈局的表格是不好的,但是它們在網頁設計和HTML中仍然佔有一席之地,即顯示表格數據,如列車時刻表的日曆。 對於這個內容,使用表格仍然是一個可以接受的好方法。
那麼你怎麼佈置一張桌子呢? 我們先創建一個簡單的2x2表格。 這將有2列(這些是垂直塊)和2行(水平塊)。 在構建了2x2表後,只需添加其他行或列,即可構建任意大小的表。
難度:一般
所需時間: 10分鐘
就是這樣:
- 首先打開表格
- 用tr標籤
打開第一行 - 用td標籤打開第一列
- 編寫單元格的內容
- 關閉第一個單元格並打開第二個單元 td>
- 寫下第二個單元格的內容
- 關閉第二個單元並關閉行 td> tr>
- 按第一行寫第二行
td> | td> tr> - 然後關閉表格 table>
您也可以選擇使用 | 元素將表格標題添加到表格中。 這些表頭將替換第一個表格行中的“表格數據”片段,如下所示:
Name th> | 角色 tr> | Jeremy td> | Designer td> tr> < td> Jennifer td>開發人員 td> | tr> table> 當此頁面在瀏覽器中呈現時,默認情況下,帶錶格標題的第一行將以粗體文本顯示,並且它們將居中顯示在表格單元格中。
那麼,在HTML中使用表格可以嗎? 是的 - 只要你沒有將它們用於佈局目的。 如果您需要顯示表格信息,則可以使用表格。 事實上,避免使用一些錯誤的純度表來迴避這種合法的HTML元素,因為在今天這個時代使用它們是為了佈局的原因。
由Jennifer Kyrin撰寫。 由傑里米吉拉德於8/11/16編輯
| | |