HTML5 table Label Style introduction (also attached HTML5 table CSS Center instance)

HTML table Label Style introduction (also attached HTML5 table CSS Center instance), this article is mainly about the HTML5 table label definition and various styles introduced.

Definition and usage of HTML 5 <table> Tags:

<table> tags define tables. Inside the <table> tab, you can place the title of the table, table rows, table columns, table cells, and other tables.

Standard properties for HTML table tags:

Class, Contenteditable, ContextMenu, dir, draggable, id, irrelevant,

Lang, ref, Registrationmark, TabIndex, template, title

An example of an HTML table style is introduced:

<table border= "1" >    <tr>            <td width= "Up" align= "right" valign= "top" nowrap= "nowrap" >< strong> Handling Comments:</strong></td>                <td id= "fnote"  width= "300px" colspan= "8" > </td>                         </tr>    <tr>            <td><a href= "#" onclick= "Showad ()" > Approval record </a></td>    </tr>                </table>

Width: Widths of columns

Align: cell content is arranged horizontally: right-left center

valign: Cell contents vertical arrangement: Top Bottom Middle Baseline

Colspan: The number of columns a cell can span

RowSpan: Number of rows that a cell can span

rowspan=3 TR

NoWrap: Specifies whether the contents of the cell are wrapped

Form table table-specific style properties:

1. Border Merge

Property: Border-collapse

Value:

1, separate

Default value, separating border mode

2, collapse

Border Merge Mode

2. Border margin

1. function

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

2. Properties

Border-spacing

Value:

1, take 1 values

Indicates equal horizontal and vertical spacing

2, take 2 values

The horizontal spacing represented by the first value

The second value represents the vertical spacing

Two values separated by a space

3. Requirements

The border-collapse must be separate

Must be valid for separating border mode

3. Title Position

<caption></caption>

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

Property: Caption-side

Value:

1. Top

Default

2, Bottom

The title is below the table

Use DIV to center the table in CSS:

See Using Display:table-cell can render div into a cell, the content in the table TD is centered layout, then think of a div contains a div, inside the div vertical Center method conjecture can use:

Set the outside Div to Display:table-cell, then the div inside will automatically center vertically.

The test only found the div is not centered, then use Vertical-align Center, because:

Only one element is either inline or Inline-block (Table-cell can also be interpreted as inline-block level), and the Vertical-align attribute on its body will work.

HTML controls such as a slice, a button, a single check box, a single-line/multiline text box, and only those elements will work on the Vertical-align property by default.

Now Table-cell can use Vertical-align:middle to let the contents of the vertical center, if I want to achieve horizontal center it? Text-algin:center, suitable for inline elements, so I just set the div inside to Line-block on the line.

Code Validation:

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

"Recommended"

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

HTML5 audio tags How to use? HTML5 Auto-Play Implementation code instance