HTML Tables

HTML tables are used to arranged data or information in rows and columns. Tables are useful and important for various reasons such as:

• It helps to organize and structure data for easy interpretation.
• Useful in statistical tabulation.
• Useful in clear and neat comparative presentation.

A simple HTML table consist of <table>, <th>, <tr> and <td> tags.

Creating a table

Now let's do it together as I explain it step by step.

• <table> - This tag is used to wrap the table rows and other tags of the table.
• <tr> - This tag is used to define the table rows.
• <th> - This tag is used to define the header cells inside the table row.
• <td> - This tag is used to define ordinary cell inside the table row.

HTML Table Tags

Below are list of complete HTML table tags and their what they are used for.

TAGS	DESCRIPTION
<table>	Creates a table.
<tr>	Creates table row.
<th>	Defines the table header in a table row.
<td>	Defines the table data in a table row.
<thead>	Used to group the header content of a table
<tbody>	Used to group the body content of a table
<tfoot>	Used to group the footer content of a table
<caption>	Used to specify table caption
<colgroup>	Used to group one or more columns
<col>	Column properties within the <colgroup> tag.

Table Formatting

Table structure can be altered to fit your desired outcome. I will be showing you few major table's formatting in HTML.

COLSPAN

The colspan is an attribute that is used to make a cell span over multiple specified columns.

• colspan="2" - means take two columns.
• colspan="3" - means take three columns.

ROWSPAN

The colspan is an attribute that is used to make a cell span over multiple specified rows.

• rowspan="2" - means take two rows.
• rowspan="3" - means take three rows.

Table Styling

To make your table in HTML look nice you need some basic styling.

WIDTH AND HEIGHT

This has to do with the size of the table.

• You can use any of the styling methods, but here lets used embedded (internal) styling.
• Set your width and height to 100% and 300px respectively and see the result.

BORDER SIZE, STYLE AND COLOR

Border size, style and color are often used in tables together in shorthand styling (border="border-size border-style border-color")

• You can use any of the styling methods, but here lets used embedded (internal) styling.
• Set border: 4px solid skyblue; and see the result.

BORDER COLLAPSE

Border collapse property is used to specify whether the borders of cells should collapse into a single border or not.

• You can use any of the styling methods, but here lets used inline styling.
• Inside the <table> opening tag, set style="border-collapse: collapse;" and see the result.

BORDER PROPERTIES

Below are lists of complete border properties you can use to style your table.

PROPERTIES	VALUES
border-size	1px, 2px, 3px etc
border-style	dotted, dashed, solid, double, groove, ridge, inset, outset, none and hidden
border-color	blue, yellow, #065735, etc
border-spacing	1px, 2px, 3px etc
border-collapse	separate, collapse

OTHER STYLING

Other styling properties can also used in tables

• background-color
• margin
• padding
• font-size
• Etc.

Nested Table

This is a table inside another table.