Table (HTML)

Schema of CSS Table Layers.

Table is a html tag for creating boxes on web pages and to display data in those boxes.

<table>…</table>

table { display: table }

Creates a table

<tr>…</tr>

tr { display: table-row }

Creates a row in the table.

<th>…</th>

th { display: table-cell }

Creates a table header cell within a row; contents are conventionally displayed bold and centered. An aural user agent may use a louder voice for these items.

<td>…</td>

td { display: table-cell }

Creates a table data cell within a row.

<colgroup>…</colgroup>

colgroup { display: table-column-group }

Specifies a column group in a table.

<col />

col { display: table-column }

Specifies attributes for an entire column in a table.

<caption>…</caption>

caption { display: table-caption }

Specifies a caption for the entire table.

<thead>…</thead>

thead { display: table-header-group }

Specifies the header part of a table. This section may be repeated by the user agent if the table is split across pages (in printing or other paged media).

<tfoot>…</tfoot>

tfoot { display: table-footer-group }

Specifies the footer part of a table. Like <thead>, this section may be repeated by the user agent if the table is split across pages (in printing or other paged media)

<tbody>…</tbody>

tbody { display: table-row-group }

Specifies the main part of a table.

TABLE

TR

TH

TD

COLGROUP, COL

THEAD

TFOOT

TBODY

CAPTION

Html tag : <caption> ... </caption>

This tag can have "align" (html)(Deprecated) property, and/or "caption-side" css/stylesheet property. Other property it can have are class, id, title, lang, dir.

align = "top | bottom | left | right"
style = "caption-side: top | bottom | left | right | inherit ;"

By default, caption uses "align=top".

In the rightside table, the texts "Caption at bottom", displaying a bottom side caption.

**Caption at bottom**
Data-Type-1	Data-Type-2
Data-1a	Data-2x
Data-1b	Data-2y

Wiki code:

{| border="1" |+ align="bottom" style="caption-side: bottom" | Caption at '''bottom''' ! Data-Type-1 !! Data-Type-2 |- | Data-1a || Data-2a |- | Data-1b || Data-2b |}