HTML Tables
HTML tables allow to arrange information into rows and columns.
Define an HTML Table
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
Example
A simple HTML table:
<!DOCTYPE html> <html> <head> </head> <body> <h2>Table With Border</h2> <table width="100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
The property width=100% will expand the table 100% of the window size
Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table – Add a Border
<!DOCTYPE html> <html> <head> </head> <body> <h2>Table With Border</h2> <table width="100%" border="1"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
HTML Table – Add Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
<!DOCTYPE html> <html> <head> </head> <body> <h2>Cellpadding</h2> <p>Cell padding specifies the space between the cell content and its borders.</p> <table width="100%" border="1" cellpadding="5" cellspacing="6"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
HTML Table – Cell that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html> <html> <head> </head> <body> <h2>Cell that spans two columns</h2> <p>To make a cell span more than one column, use the colspan attribute.</p> <table width="100%" border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Tommy</td> <td>55577854</td> <td>55577855</td> </tr> </table> </body> </html>
HTML Table – Cell that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html> <html> <head> </head> <body> <h2>Cell that spans two rows</h2> <p>To make a cell span more than one row, use the rowspan attribute.</p> <table width="100%" border="1"> <tr> <th>Name:</th> <td>Simple man</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>9890564345</td> </tr> <tr> <td>9865342321</td> </tr> </table> </body> </html>
HTML Table – Add a Caption
To add a caption to a table, use the tag:
<!DOCTYPE html> <html> <head> </head> <body> <h2>Table Caption</h2> <p>To add a caption to a table, use the caption tag.</p> <table width="100%" border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>Rs. 100</td> </tr> <tr> <td>February</td> <td>Rs. 50</td> </tr> </table> </body> </html>
Note:The
<caption>
tag must be inserted immediately after the<table>
tag.
The various attributes used with the table can be replaced with CSS as follows
width | width=”100%” | style=”width:100%” |
border | border=”1″ | table, th, td { border: 1px solid black; } |
cellpadding | cellpadding=”5″ | th, td { padding: 5px; } |
cellspacing | cellspacing=”10″ | th, td { border-spacing:10px; } |
Lets see a combined example:
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-spacing:10px; } th, td { padding: 5px; } </style> </head> <body> <h2>Table With Border applying css styles </h2> <table style="width:100%" > <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
Refer the following video for more assistance