首頁 > web前端 > html教學 > 解析Table標籤,不要再把td、th、tr搞混了!

解析Table標籤,不要再把td、th、tr搞混了!

藏色散人
發布: 2022-08-05 10:47:10
轉載
4420 人瀏覽過

摘要

HTML中Table標籤自己一直掌握的都不是很好,常常把td、th、tr搞混。雖然現在的開發很少使用原生的HTML,基本上都是用別人寫好的前端元件,但別人寫的table元件一般也是按照原生table的那些層次來設計的。 【推薦:HTML影片教學

所以今天乾脆就好好總結一下!

基本結構

##標籤說明常用屬性#表格最頂層標籤border:邊框寬度;width:表格寬度;align:表格資料的對齊方式;cellpadding:表示每個單元格中內容與邊框的距離,該值越大,表格給人的視覺感受越大;cellspacing表示每個相鄰單元格之間的距離thead表頭的父標籤tr(table row)列名稱的父標籤,一般一個thead中只有一個tr,因為一般一個表只有一行列名##th(table header cell)tbodytd(table data cell)#tfoot案例


表示表格頭單元格,裡面的資料就是列名
表單資料部分的父標籤
數據單元格,具體的資料就是放在這個標籤中
表示表格頁尾 # colspan表示列合併;rowspan表示行合併
	
登入後複製
                                                                                                                                                           
项目单价/元数量/斤金额/元
白菜1.0033.00
西瓜0.50105.00
合计:8.00

解析Table標籤,不要再把td、th、tr搞混了!總結

    除了th、td可以製定具體的資料外,其他基本上都是類似於不能製定具體內容的父標籤。 th指定表頭中的列名,二td指定具體的資料值
  • table主要分為三個部分,即表頭thead、表資料主體tbody、表格頁腳tfoot
  • th、td的父標籤都是tr,就是說必須將th、td放在tr中
  • thead指定資料使用th, tbale和tfoot指定資料使用td

以上是解析Table標籤,不要再把td、th、tr搞混了!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板