HTML Tables
HTML tables enable site developers to display information in tabular format like rows and columns.
Example
BookID | BookName | BookPrice |
---|---|---|
1 | Easy Oracle PL/SQL Programming | 195 |
2 | Professional MySql | 150 |
Define an HTML Table
A HTML table is defined by the table
element.
A tr
tag is used for each table row. A th
element is used for each table header. The td
tag is defined for every data/cell table.
The text is bold and centralised by default in th
elements.
The td
elements text is regular and left-aligned by default.
Example
A simple HTML table:
BookID
BookName
BookPrice
1
Easy Oracle PL/SQL Programming
195
2
Professional MySql
150
Note: The components of td
are the table data containers. You may have HTML-based components of any kind: text, photos, lists, tables, etc.
HTML Table - Add a Border
Use the HTML or CSS border
property to add a border to a table:
Example
BookID
BookName
BookPrice
1
Easy Oracle PL/SQL Programming
195
2
Professional MySql
150
Recall defining both table and table cell boundaries.
HTML Table - Collapsed Borders
Add the CSS border-collapse
attribute to have the borders collapse into a single border:
Example
BookID
BookName
BookPrice
1
Easy Oracle PL/SQL Programming
195
2
Professional MySql
150
HTML Table - Add Cell Padding
Cell padding indicates the blank space between the contents and their boundaries.
If a padding is not specified, table cells without a padding will appear.
Use the CSS padding
property or use HTML cellpadding
attribute to set the padding:
Example
BookID
BookName
BookPrice
1
Easy Oracle PL/SQL Programming
195
2
Professional MySql
150
Related Links
HTML Table - Add Cell Spacing
The space between the cells or columns is defined by the border spacing.
Use the CSS border-spacing
property or use HTML cellspacing
attribute to set the boundary distance of a table:
Example
BookID
BookName
BookPrice
1
Easy Oracle PL/SQL Programming
195
2
Professional MySql
150
Note: Border-spacing has no impact if the table has collapsed borders.
HTML Table - Cell that Spans Many Columns
Use the colspan
property for making a cell span of more than one column:
Example
Name
Telephone
Bill Gates
55577854
55577855
Result of the above query
Name | Telephone | |
---|---|---|
Bill Gates | 55577854 | 55577855 |
HTML Table - Cell that Spans Many Rows
Use the rowspan
property to create a cell span of more than one row:
Example
Name
City
John
London
Jack
Result of the above query
Name | City |
---|---|
John | London |
Jack |
Related Links
HTML Table - Add a Caption
Use the caption
element to add a caption to your table:
Example
Monthly savings
Month
Savings
January
$100
February
$50
Result of the above query
Month | Savings |
---|---|
January | $100 |
February | $50 |
Note: Following the table tag, the caption
tag must be put.
A Special Style for One Table
Add an id
attribute to the table to provide a custom style for a certain table: