Skip to content

Latest commit

 

History

History
608 lines (560 loc) · 38.8 KB

HTML-Table.md

File metadata and controls

608 lines (560 loc) · 38.8 KB
Raw

HTML5 - Table Elements

Table content

  • Table content

    • The elements here are used to create and handle tabular data.
    Element Description
    <caption> The HTML Table Caption element (<caption>) specifies the caption (or title) of a table, and if used is always the first child of a <table>.
    <col> The HTML <col> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
    <colgroup> The HTML <colgroup> element defines a group of columns within a table.
    <table> The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
    <tbody> The HTML Table Body element (<tbody>) encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).
    <td> The HTML <td> element defines a cell of a table that contains data. It participates in the table model.
    <tfoot> The HTML <tfoot> element defines a set of rows summarizing the columns of the table.
    <th> The HTML <th> element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.
    <thead> The HTML <thead> element defines a set of rows defining the head of the columns of the table.
    <tr> The HTML <tr> element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.The HTML <tr> element specifies that the markup contained inside the <tr> block comprises one row of a table, inside which the <th> and <td> elements create header and data cells, respectively, within the row.

List of Table Elements

Type Element Characteristics Link
Table <table> defines a table in HTML5 Table
Caption <caption> give a title to the table and used as the first child element of <table> Caption
Row groups <thead>, <tfoot>, <tbody>
  • define parts of a table
  • browsers able to identify which cells are header, body and footer
  • allowed browser to scroll independently of header and footer
 Header , Footer , Body
Column groups <colgroup>, <col>
  • group columns in a table
  • specify properties for a group of columns
  • using <col> within <colgroup>
 Column
Table row <tr> creates a table row Row
Table cells <th>, <td>
  • types of cells in a table - header and standard
  • table header cells: bold
  • standard cells: by default
 Row Heading , Data

  • The <table> and related elements

    • <table> element: rendering tables in an HTML document
    • <tr> element: table row
    • <th> element: table header, defaults as bold and centered
    • <td> element: a table data/cell
    • best practice for accessibility
      • always add a <caption> tag inside the <table> tag
      • use a scope attribute w/ all <th scope="row or column"> for identifying whether a table header is a column header or a row header

  • Common styles for <table> element

    • rendering cell/row/table border, e.g., tr, th, td { border: 1px solid; }
    • adjusting spacing btw text in cells and the cell borders, e.g., td { padding: 10px; }

Attributes of the 'table' tag

Attributes of <table> tag
Attribute Value Description
align left
center
right		 Not supported in HTML5.
Specifies the alignment of a table according to surrounding text
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Not supported in HTML5.
Specifies the background color for a table
border 1
0		 Not supported in HTML5.
Specifies whether or not the table is being used for layout purposes
cellpadding pixels Not supported in HTML5.
Specifies the space between the cell wall and the cell content
cellspacing pixels Not supported in HTML5.
Specifies the space between cells
frame void
above
below
hsides
lhs
rhs
vsides
box
border		 Not supported in HTML5.
Specifies which parts of the outside borders that should be visible
rules none
groups
rows
cols
all		 Not supported in HTML5.
Specifies which parts of the inside borders that should be visible
summary text Not supported in HTML5.
Specifies a summary of the content of a table
width pixels
%		 Not supported in HTML5.
Specifies the width of a table

Attributes of the 'caption' tag

Attributes of <caption> tag
Attribute Value Description
align left
right
top
bottom		 Not supported in HTML5.
Defines the alignment of the caption

Attributes of the 'tr' tag

Attributes of <tr> tag
Attribute Value Description
align right
left
center
justify
char		 Not supported in HTML5.
Aligns the content in a table row
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Not supported in HTML5.
Specifies a background color for a table row
char character Not supported in HTML5.
Aligns the content in a table row to a character
charoff number Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content in a table row

Attributes of the 'th' tag

Attributes of <th> tag
Attribute Value Description
abbr text Specifies an abbreviated version of the content in a header cell
align left
right
center
justify
char		 Not supported in HTML5.
Aligns the content in a header cell
axis category_name Not supported in HTML5.
Categorizes header cells
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Not supported in HTML5.
Specifies the background color of a header cell
char character Not supported in HTML5.
Aligns the content in a header cell to a character
charoff number  Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
colspan number Specifies the number of columns a header cell should span
Usage: <th colspan="2">
Example
headers header_id Specifies one or more header cells a cell is related to
height pixels
%		 Not supported in HTML5.
Sets the height of a header cell
nowrap nowrap Not supported in HTML5.
Specifies that the content inside a header cell should not wrap
rowspan number Specifies the number of rows a header cell should span
Usage: <th rowspan="2">
Example
scope col
colgroup
row
rowgroup		 Specifies whether a header cell is a header for a column, row, or group of columns or rows
Usage: <th scope="row">
Example
sorted reversed
number
reversed number
number reversed		 Defines the sort direction of a column
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content in a header cell
width pixels
%		 Not supported in HTML5.
Specifies the width of a header cell

Attributes of the 'td' tag

Attributes of <td> tag
Attribute Value Description
abbr text Not supported in HTML5.
Specifies an abbreviated version of the content in a cell
align left
right
center
justify
char		 Not supported in HTML5.
Aligns the content in a cell
axis category_name Not supported in HTML5.
Categorizes cells
bgcolor rgb(x,x,x)
#xxxxxx
colorname		 Not supported in HTML5.
Specifies the background color of a cell
char character Not supported in HTML5.
Aligns the content in a cell to a character
charoff number  Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
colspan number Specifies the number of columns a cell should span
Usage: <td colspan="2">
Example
headers header_id Specifies one or more header cells a cell is related
Usage:
<tr>
     <th id="header-id">
</tr>
<tr>
     <td headers="header-id">
     <td headers="header-id">
</tr>
Example
height pixels
%		 Not supported in HTML5.
Sets the height of a cell
nowrap nowrap Not supported in HTML5.
Specifies that the content inside a cell should not wrap
rowspan number Sets the number of rows a cell should span
Usage: <td rowspan="2">
Example
scope col
colgroup
row
rowgroup		 Not supported in HTML5.
Defines a way to associate header cells and data cells in a table
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content in a cell
width pixels
%		 Not supported in HTML5.
Specifies the width of a cell

Attributes of the 'colgroup' tag

Attributes of <colgroup> tag
Attribute Value Description
align left
right
center
justify
char		 Not supported in HTML5.
Aligns the content in a column group
char character Not supported in HTML5.
Aligns the content in a column group to a character
charoff number Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
span number Specifies the number of columns a column group should span
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content in a column group
width pixels
%
relative_length		 Not supported in HTML5.
Specifies the width of a column group

Attributes of the 'col' tag

Attributes of <col> tag
Attribute Value Description
align left
right
center
justify
char		 Not supported in HTML5.
Specifies the alignment of the content related to a <col> element
char character Not supported in HTML5.
Specifies the alignment of the content related to a <col> element to a character
charoff number Not supported in HTML5.
Specifies the number of characters the content will be aligned from the character specified by the char attribute
span number Specifies the number of columns a <col> element should span
valign top
middle
bottom
baseline		 Not supported in HTML5.
Specifies the vertical alignment of the content related to a <col> element
width %
pixels
relative_length		 Not supported in HTML5.
Specifies the width of a <col> element

Attributes of the 'thead' tag

Attributes of <thead> tag
Attribute Value Description
align right
left
center
justify
char		 Not supported in HTML5.
Aligns the content inside the <thead> element
char character Not supported in HTML5.
Aligns the content inside the <thead> element to a character
charoff number Not supported in HTML5.
Sets the number of characters the content inside the <thead> element will be aligned from the character specified by the char attribute
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content inside the <thead> element

Attributes of the 'tbody' tag

Attributes of <tbody> tag
Attribute Value Description
align right
left
center
justify
char		 Not supported in HTML5.
Aligns the content inside the <tbody> element
char character Not supported in HTML5.
Aligns the content inside the <tbody> element to a character
charoff number Not supported in HTML5.
Sets the number of characters the content inside the <tbody> element will be aligned from the character specified by the char attribute
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content inside the <tbody> element

Attributes of the 'tfoot' tag

Attributes of <tfoot> tag
Attribute Value Description
align right
left
center
justify
char		 Not supported in HTML5.
Aligns the content inside the <tfoot> element
char character Not supported in HTML5.
Aligns the content inside the <tfoot> element to a character
charoff number Not supported in HTML5.
Sets the number of characters the content inside the <tfoot> element will be aligned from the character specified by the char attribute
valign top
middle
bottom
baseline		 Not supported in HTML5.
Vertical aligns the content inside the <tfoot> element