html5 table标签的样式介绍（另附html5 table css居中的实例）-Tutorial H5-php.cn

html table标签的样式介绍（另附html5 table css居中的实例），本篇文章主要为大家讲述的就是html5 table标签的定义和各种样式介绍。

HTML 5

标签的定义和用法：

标签可定义表格。在

标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

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>

Salin selepas log masuk

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>

Salin selepas log masuk

【相关推荐】

html strong标签是什么意思？html中strong标签的具体用法介绍

html5 audio标签怎么用？html5 自动播放实现代码实例

Atas ialah kandungan terperinci html5 table标签的样式介绍（另附html5 table css居中的实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

html5 table

sumber：php.cn

Artikel sebelumnya：html5实现手机触摸出现录音以及离开停止录音并上传的功能（代码） Artikel seterusnya：html5 output标签是什么意思？html5 output标签的使用方法

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang