新聞中心
這篇文章給大家分享的是有關(guān)html如何創(chuàng)建表格的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
在網(wǎng)站建設(shè)、網(wǎng)站制作中從網(wǎng)站色彩、結(jié)構(gòu)布局、欄目設(shè)置、關(guān)鍵詞群組等細(xì)微處著手,突出企業(yè)的產(chǎn)品/服務(wù)/品牌,幫助企業(yè)鎖定精準(zhǔn)用戶,提高在線咨詢和轉(zhuǎn)化,使成都網(wǎng)站營(yíng)銷成為有效果、有回報(bào)的無錫營(yíng)銷推廣。成都創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設(shè)10多年了,客戶滿意度97.8%,歡迎成都創(chuàng)新互聯(lián)客戶聯(lián)系。
html創(chuàng)建表格的方法:首先使用“
” 標(biāo)簽定義表格框架;然后使用一個(gè)或多個(gè)“
”標(biāo)簽定義表格中的行,一個(gè)或多個(gè)“ ”標(biāo)簽定義單元格;最后在td標(biāo)簽對(duì)中填入表格數(shù)據(jù)(單元格內(nèi)容)即可,數(shù)據(jù)可以是文本、圖片等信息。 本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。
表格由
標(biāo)簽來定義。
每個(gè)表格均有若干行(由
標(biāo)簽定義),每行被分割為若干單元格(由 標(biāo)簽定義)。 字母 td 指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
border屬性指定有無邊框,不寫border屬性或者賦值為0,創(chuàng)建的表格都將沒有邊框;賦值的大小決定了邊框的粗細(xì)。
th屬性設(shè)置表頭,如果不把表頭特殊設(shè)置,那么顯示出來的表頭會(huì)和內(nèi)容一樣的格式。
下面通過代碼示例來給大家一步步介紹:
1、下面寫兩個(gè)簡(jiǎn)單的沒有邊框的表格
第一個(gè)表格
name sex 張三 女 第二個(gè)表格
name sex 張三 女 效果:
2、寫一個(gè)有邊框的表格(border的賦值決定了邊框的粗細(xì))
給表格設(shè)置標(biāo)題,用
。 假如表格中有空值,那么在這個(gè)單元格里插入一個(gè)空格占位符“ ",可以讓單元格保持完整。
第三個(gè)表格
人員信息表
name sex 張三 女 unknown 效果:
3、下面設(shè)置一個(gè)橫向跨列和一個(gè)縱向跨行的表格
某一個(gè)單元格橫跨兩列,使用 colspan="2"來設(shè)置,數(shù)字代表跨的列
姓名 成績(jī) 張丹 98 56 87 效果:
某一個(gè)單元格縱跨兩行,使用 rowspan="2"來設(shè)置,數(shù)字代表跨的行
姓名 成績(jī) 張丹 98 56 87 效果:
4、HTML的各項(xiàng)標(biāo)簽可以隨意嵌套。
4.1在單元格里嵌套列表
房間里包含的水果 香蕉 葡萄 番茄 效果:
4.2在單元格里嵌套單元格
我要做的事
//-------------------------//---------------------中間是一個(gè)完整的單元格
周一 做PPT 開會(huì) 寫報(bào)告 效果:
5、更改表格樣式
5.1單元格樣式之----單元格邊距,保證內(nèi)容與邊框的距離
//----------使用cellpadding來設(shè)置單元格邊距
我要做的事
//----------使用cellpadding來設(shè)置單元格邊距
周一 做PPT 開會(huì) 寫報(bào)告 效果:
5.2單元格樣式之----給表格添加背景顏色或圖片(顏色用bgcolor;圖片用background)
我要做的事
周一 做PPT 開會(huì) 寫報(bào)告 效果:
5.3給某一個(gè)單元格單獨(dú)設(shè)置背景
我要做的事
周一 做PPT 開會(huì) 寫報(bào)告 效果:
5.4在表格中排列內(nèi)容--讓表格更好看(align)
電表名稱 Ua(V) Ub(V) Uc(V) 2018-6-19 00:00 232.2 239.0 231.8 2018-6-19 05:00 232.6 233.2 234.3 2018-6-19 10:00 232.6 232.2 234.6 效果:
上面這些功能,可以根據(jù)實(shí)際情況隨意嵌套,如同搭積木一樣,大家可以根據(jù)自己喜好利用這些功能寫出炫酷的表格!
感謝各位的閱讀!關(guān)于“html如何創(chuàng)建表格”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
名稱欄目:html如何創(chuàng)建表格
文章URL:http://www.dlmjj.cn/article/gjdpsg.html