小編給大家分享一下html5中table樣式實(shí)例,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名與空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、察隅網(wǎng)站維護(hù)、網(wǎng)站推廣。HTML 5 <table> 標(biāo)簽的定義和用法:
<table> 標(biāo)簽可定義表格。在 <table> 標(biāo)簽內(nèi)部,你可以放置表格的標(biāo)題、表格行、表格列、表格單元以及其他的表格。
html table標(biāo)簽的標(biāo)準(zhǔn)屬性:
class, contenteditable, contextmenu, dir, draggable, id, irrelevant,
lang, ref, registrationmark, tabindex, template, title
html table樣式實(shí)例介紹:
<table border="1"> <tr> <td width="95" align="right" valign="top" nowrap="nowrap"><strong>處理意見:</strong></td> <td id="fnote" width="300px" colspan="8"> </td> </tr> <tr> <td><a href="#" onclick="showad()">審批記錄</a></td> </tr> </table>
width: 列的寬度
align: 單元格內(nèi)容水平排列方式:right left center
valign: 單元格內(nèi)容垂直排列方式: top bottom middle baseline
colspan: 單元格可跨越的列數(shù)
rowspan: 單元格可跨越的行數(shù)
rowspan=3 tr
nowrap:規(guī)定單元格中的內(nèi)容是否折行
表格table特有的樣式屬性:
1、邊框合并
屬性:border-collapse
取值:
1、separate
默認(rèn)值,分離邊框模式
2、collapse
邊框合并模式
2、邊框邊距
1、作用
設(shè)置相鄰單元格邊框之間的距離(類似于cellspacing)
2、屬性
border-spacing
取值:
1、取1個值
表示水平和垂直間距相等
2、取2個值
第一個值表示的 水平間距
第二個值表示的 垂直間距
兩個值之間用 空格 隔開
3、要求
border-collapse必須為separate
必須為分離邊框模式時有效
3、標(biāo)題位置
<caption></caption>
作用:將標(biāo)題位置由默認(rèn)的位置改到表格之下
屬性:caption-side
取值:
1、top
默認(rèn)
2、bottom
標(biāo)題位于表格之下
在css里面用div來居中表格:
看到使用display:table-cell可以將div渲染成一個cell,在表格td中的內(nèi)容都是居中布局,那么想到了一個div中包含一個div,里面的div垂直居中的辦法猜想可以使用:
將外面的div設(shè)置display:table-cell,那么里面的div就自動垂直居中了
測試才發(fā)現(xiàn)里面的div沒有居中,那么使用vertical-align居中,因為:
只有一個元素屬于inline或是inline-block(table-cell也可以理解為inline-block水平)水平,其身上的vertical-align屬性才會起作用。
例如圖片,按鈕,單復(fù)選框,單行/多行文本框等HTML控件,只有這些元素默認(rèn)情況下會對vertical-align屬性起作用。
現(xiàn)在table-cell中可以使用vertical-align:middle讓里面的內(nèi)容垂直居中了,如果我想要實(shí)現(xiàn)水平居中呢?text-algin:center,適合行內(nèi)元素,那么我只要將里面的div設(shè)置為line-block就行了
代碼驗證:
<style> .table { display: table-cell; vertical-align: middle; text-align: center; } .like { display: inline-block; width:100px; height:50px; border:2px solid black; } </style> <div class="table" style="width:300px;height: 300px;background-color: #13c4a5"> <div class="like"> </div> </div>
以上是“html5中table樣式實(shí)例”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道!
分享文章:html5中table樣式實(shí)例-創(chuàng)新互聯(lián)
URL標(biāo)題:http://muchs.cn/article38/ddsgpp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供做網(wǎng)站、Google、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、虛擬主機(jī)、網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容