Introduction to the style of html5 table tag (attached is an example of html5 table css centering)-H5 Tutorial-php.cn

HTML table tag style introduction (attached is an example of html5 table css centering). This article mainly tells you the definition of html5 table tag and the introduction of various styles.

HTML 5

tag definition and usage:

tag can define a table. Inside the

tag, you can place table titles, table rows, table columns, table cells, and other tables.

html Standard attributes of table tags:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant,

lang, ref, registrationmark , tabindex, template, title

html table style example introduction:

<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>

Copy after login

width: the width of the column

align: the horizontal arrangement of cell content ：right left center

valign: vertical arrangement of cell content: top bottom middle baseline

colspan: the number of columns that the cell can span

rowspan: the number of columns that the cell can span Number of rows

rowspan=3 tr

nowrap: Specifies whether the content in the cell should be folded

table Unique style attributes:

1. Border merge

Attribute: border-collapse

Value:

1. separate

Default value, separate border mode

2.collapse

Border merge mode

2.Border margin

1. Function

Set the distance between adjacent cell borders (similar to cellspacing)

2. Attribute

border-spacing

Value:

1. Take 1 value

means the horizontal and vertical spacing are equal

2. Take 2 values

The horizontal spacing represented by one value

The vertical spacing represented by the second value

Separate the two values with a space

3. Requirements

border-collapse must be separate

Must be valid in separate border mode

3. Title position

Function: Change the title position from the default position to below the table

Attribute: caption-side

Value:

1. top

Default

2. Bottom

The title is under the table

Use div to center the table in css:

I saw that using display: table-cell can render a div into a cell, and the content in the table td is all centered. Then I thought of a div containing a div, and the div inside is vertically centered. I guess it can be done. Use:

Set the outer div to display:table-cell, then the inner div will be automatically centered vertically.

After testing, I found that the inner div is not centered, then use vertical-align to center it. Because:

Only if one element belongs to inline or inline-block (table-cell can also be understood as inline-block level) level, the vertical-align attribute on it will work.

For example, pictures, buttons, single check boxes, single-line/multi-line text boxes and other HTML controls. Only these elements will have an effect on the vertical-align attribute by default.

Now you can use vertical-align:middle in table-cell to center the content vertically. What if I want to achieve horizontal centering? text-algin: center, suitable for inline elements, then I just need to set the div inside to line-block

Code verification:

<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>

Copy after login

[Related recommendations]

html What does the strong tag mean? Introduction to the specific usage of the strong tag in html

html5 How to use the audio tag? HTML5 automatic playback implementation code example

The above is the detailed content of Introduction to the style of html5 table tag (attached is an example of html5 table css centering). For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html5 table

source：php.cn

Previous article：HTML5 realizes the function of recording when the mobile phone is touched and leaving to stop recording and upload (code) Next article：What does the html5 output tag mean? How to use the html5 output tag

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn