HTML
HTML Head
HTML Forms
HTML Graphics
HTML Media
HTML APIs
HTML Tables
We can display data in structured rows and columns set with HTML tables. Each table is created using the <table> element and can include headers, rows, and cells.
Here is a simple example of the basic structure of an HTML table.
Table Headers
The header is created using <th> element. It explains the data of each column. Header cells are centered and bold by default.
Table Borders
We can add borders to the table to make it more readable. It can be done using the border attribute or CSS.
Following is an example of table borders using HTML attributes.
Below is an example of table borders using CSS.
Table Spacing and Padding
Spacing: controls the space between table cells. Spacing is applied using the cellspacing attribute HTML. This attribute maintains the space between the edges of adjacent cells.
Padding: maintains the distance between the content and border of a cell. It is applied using the cellpadding attribute in HTML. This attribute adds space between the cell’s content and its border.
Table Size
Table size defines the dimensions of a table. We can set the table’s width and height using width and height attributes in HTML.
Width: specifies the width of the table. It can be set in pixels or as a percentage of the parent element.
Height: defines the height of the table. It can be set in pixels or as a percentage of the parent element.
Spanning Columns and Rows
To merge table cells across rows and columns we use the rowspan and colspan attributes.
Following is the example of column span.
Following is the example of row span.
Table Colgroup
The <colgroup> element groups one or more <col> elements, allowing to apply style to entire column cells rather than individual cells. It is for defining the width, background color, or other styling.
The <colgroup> element should be a child of the <table> element and used with the <col> element to define properties for the columns in a table.
To organize and display data, HTML tables are a perfect tool. By understanding the basic structure and how to style and span cells, anyone can create clean, professional tables for any purpose.
Watch Video on YouTube
HTML Tables
