制作網頁時,要合理規劃網頁布局。比如,在網頁中添加一個表格,可分為上、中、下三部分,上部存放網頁標題或LOGO圖片,中間部分是整個網頁的主體內容,底部就是相關制作信息。此外,單元格里還可再添加單元格,將內容分類別、分層次合理規劃。
表格標簽--table
是一個雙標簽。一個表格中包含 table 、 tr 、 td 三個基本元素。首標簽 table 和尾標簽 /table 表示一個表格的開始和結束。 tr=table row 用于表示一行的開始和結束, td=table data 用來表示行中個單元格的開始和結束。
table td 單元格內容 /td td 單元格內容 /td /tr td 單元格內容 /td td 單元格內容 /td /tr /table
表格的標題--caption
有一種特殊的單元格叫做標題單元格,位于表格的第一行,標題單元格是沒有邊框的,默認居中顯示。
caption 表格的標題 /caption
表格邊框--border
默認情況下,表格不顯示邊框。為了更好的區分內容,可以設置表格邊框寬度大小,
table border= 邊框屬性
表格內文字與邊框的距離--cellpadding
默認情況下,文字緊貼邊框。通過cellpadding可以調整文字與邊框之間的距離
table cellpadding= 文字與邊框的距離
表格中單元格之間的距離--cellspacing
表格中單元格之間的距離也可以變化。
table cellspacing= 單元格之間的距離
單元格背景圖像--background
table background= 圖片
!DOCTYPE html html lang= en head meta charset= UTF-8 title 小白 /title /head body p 默認情況下的表格 /p table border= 2 align= center caption 亞洲 /caption td 中國 /td td 北京 /td td 1949年10月1日 /td /tr td 緬甸 /td td 內比都 /td td 1948年1月4日 /td /tr /table hr/ p 設置屬性后的表格 /p !--bgcolor:行背景顏色-- table cellpadding= 15 cellspacing= 10 border= 2 bgcolor= #8fbc8f align= center caption 亞洲 /caption td 中國 /td td 北京 /td td 1949年10月1日 /td /tr td 緬甸 /td td 內比都 /td td 1948年1月4日 /td /tr /table /body /html

行合并屬性--rowspan
在制作一些復雜的表格時,需要用到單元格合并
td row= 需要合并的行數
!DOCTYPE html html lang= en head meta charset= UTF-8 title 單元格行合并 /title /head body table border= 1 align= center width= 600 height= 300 caption 招生簡章 /caption td rowspan= 3 基礎科目 /td td 數學 /td /tr td 外語 /td /tr td 政治 /td /tr td 專業課 /td td bgcolor= #bc8f8f 100 /td /table /body /html

列合并屬性--colspan
在制作一些復雜的表格時,需要用到單元格合并
td row= 需要合并的列數
!DOCTYPE html html lang= en head meta charset= UTF-8 title 單元格列合并 /title /head body table border= 1 align= center width= 600 height= 300 cellpadding= 30 td colspan= 3 align= center 西安 /td /tr td 長安區 /td td 雁塔區 /td td 碑林區 /td /tr td 新城區 /td td 高新區 /td td 蓮湖區 /td /tr /table /body /html

表格的嵌套
一個表格內部包含其他標簽,用表格來排版頁面,可以使頁面各個部分互不沖突,整體結構優美。
!DOCTYPE html html lang= en head meta charset= UTF-8 title 表格嵌套 /title /head body table bgcolor= #8fbc8f align= center caption 示例 /caption td 曇花 /td img src= flower_02.jpg height= 300 width= 200 /td img src= flower_02.jpg height= 300 width= 200 /td /tr td 瀏覽器 /td a href= http://www.baidu.com >
以上就是本篇文章的全部內容,敢于HTML的相關知識大家可以參考PHP 的HTML開發手冊進行學習。
以上就是HTML中表格相關知識的介紹(代碼實例)的詳細內容,html教程
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。
新聞熱點
疑難解答