Introduction to the style of html5 table tag (attached is an example of html5 table css centering)

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>

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>

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