小編給大家分享一下html5中table樣式實例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、網頁空間、營銷軟件、網站建設、察隅網站維護、網站推廣。

HTML 5 <table> 標簽的定義和用法：

<table> 標簽可定義表格。在 <table> 標簽內部，你可以放置表格的標題、表格行、表格列、表格單元以及其他的表格。

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：規(guī)定單元格中的內容是否折行

表格table特有的樣式屬性：

1、邊框合并

屬性：border-collapse

取值：

1、separate

默認值，分離邊框模式

2、collapse

邊框合并模式

2、邊框邊距

1、作用

設置相鄰單元格邊框之間的距離(類似于cellspacing)

2、屬性

border-spacing

取值：

1、取1個值

表示水平和垂直間距相等

2、取2個值

第一個值表示的 水平間距

第二個值表示的 垂直間距

兩個值之間用 空格 隔開

3、要求

border-collapse必須為separate

必須為分離邊框模式時有效

3、標題位置

<caption></caption>

作用：將標題位置由默認的位置改到表格之下

屬性：caption-side

取值：

1、top

默認

2、bottom

標題位于表格之下

在css里面用div來居中表格：

看到使用display：table-cell可以將div渲染成一個cell,在表格td中的內容都是居中布局，那么想到了一個div中包含一個div，里面的div垂直居中的辦法猜想可以使用：

將外面的div設置display:table-cell，那么里面的div就自動垂直居中了

測試才發(fā)現里面的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>

以上是“html5中table樣式實例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯網站制作公司行業(yè)資訊頻道！

分享文章：html5中table樣式實例-創(chuàng)新互聯
URL標題：http://jinyejixie.com/article38/ddsgpp.html

成都網站建設公司_創(chuàng)新互聯，為您提供做網站、Google、手機網站建設、網站收錄、虛擬主機、網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯