標籤內部,你可以放置表格的標題、表格行、表格列、表格單元以及其他的表格。
html table標籤的標準屬性:
class, contenteditable, contextmenu, dir, draggable, id, irrelevant,
lang, ref, registrationmark , tabindex, template, title
html table樣式實例介紹:
<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: 單元格內容水平排列方式:right left center
valign: 單元格內容垂直排列方式: top bottom middle baseline
colspan: 單元格可跨越的列數
rowspan: 單元格可跨越的行數
rowspan=3 tr
nowrap:規定儲存格中的內容是否折行
##表格table特有的樣式屬性:
1、邊框合併
#屬性:border-collapse##取值:
# 1、separate
預設值,分離邊框模式
2、collapse
邊框合併模式
2、邊框邊距 1、作用
設定相鄰單元格邊框之間的距離(類似cellspacing)
2、屬性
border-spacing
取值:
1、取1個值
表示水平與垂直間距相等
2、取2個值
第一個值表示的水平間距
第二個值表示的垂直間距
兩個值之間用空格隔開
3、要求 border-collapse必須為separate
必須為分離邊框模式時有效
3、標題位置
作用:將標題位置由預設的位置改到表格之下
屬性:caption-side
取值:
1、top
預設
2、bottom
標題位於表格之下
#在css裡面用div來居中表格:看到使用display:table-cell可以將div渲染成一個cell,在表格td中的內容都是居中佈局,那麼想到了一個div中包含一個div,裡面的div垂直居中的辦法猜想可以使用:
將外面的div設定display:table-cell,那麼裡面的div就自動垂直居中了
測試才發現裡面的div沒有居中,那麼使用vertical-align居中,因為:
只有一個元素屬於inline或是inline-block(table-cell也可以理解為inline-block水平)水平,其身上的vertical-align屬性才會起作用。
例如圖片,按鈕,單複選框,單行/多行文字框等HTML控件,只有這些元素預設會對vertical-align屬性起作用。
現在table-cell中可以使用vertical-align:middle讓裡面的內容垂直居中了,如果我想要實現水平居中呢? text-algin:center,適合行內元素,那我只要將裡面的div設定為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>
登入後複製
【相關推薦】
#html strong標籤是什麼意思? html中strong標籤的具體用法介紹
html5 audio標籤怎麼用? html5 自動播放實作程式碼實例
以上是html5 table標籤的樣式介紹(另附html5 table css居中的實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
-
2018-09-11 16:45:17
-
2018-09-11 16:39:07
-
2018-09-11 16:29:40
-
2018-09-11 16:10:13
-
2018-09-11 16:05:55
-
2018-09-11 16:01:50
-
2018-09-11 15:55:13
-
2018-09-11 15:50:18
-
2018-09-11 15:43:40
-
2018-09-11 15:34:44