HTML Table
Let us start with explaining HTML table with an example.
Number First Name Last Name Place 1 Miranda Smith London 2 Jake Wilson New York 3 Mike Goodwin Paris
This table can be defined using HTML. Please refer the code below.
Table defined using HTML
<table style=”width:100%”> <tr> <td>Miranda</td> <td>Smith</td> <td>London</td> </tr> <tr> <td>Jake</td> <td>Wilson</td> <td>New York</td> </tr> </table>
Please Note: <table> - Defines Tables <tr> - Defines Table Rows <td> - Defines Table Data <th> - Defines Table Headings
• Table data can contain text, images, lists and other tables.
HTML Table with Border Attribute
A border around the text is never displayed, until it is defined.
Border attribute is used for defining the border. Syntax <table border=”2” style=”width:100%”> <tr> <td>Miranda</td> <td>Smith</td> <td>London</td> </tr> <tr> <td>Jake</td> <td>Wilson</td> <td>New York</td> </tr> </table>
Please Note: Defining the border using CSS is much better than using HTML attribute.
Syntax (Adding borders using CSS)
table, th, td {
border: 2px solid black;
}
Defining border to table and table cells is done separately.
HTML Table: Collapsed Borders
CSS border-collapse is used to collapse border into one.
Syntax
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
HTML Table with Cell Padding
The space between the cell content and the border is defined by cell padding.
If the padding is not specified, then there appears no padding between table cells and border.
Syntax
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
HTML Table Headings
<th> tag is defined for table headings.
By default, table headings appear bold and centered. Syntax <table style=”width:100%”> <tr> <th>Firstname</th> <th>Lastname</th> <th>Place</th> </tr> <tr> <td>Jake</td> <td>Wilson</td> <td>New York</td> </tr> </table>
Please Note: CSS text-align property is used for aligning the position of the text.
Syntax
th {
text-align: right;
}
HTML Table with Border Spacing
To define the spacing between the cells, border spacing is used.
Syntax
table {
border-spacing: 7px;
}
Table Cells to Span Many Columns
To use the cell using more than one column, colspan attribute is used.
Syntax <table style=”width:100%”> <tr> <th>Name</th> <th colspan=”2”>Contact</th> </tr> <tr> <td>Jack Wilson</td> <td>283735273</td> <td>739273638</td> </tr> </table>
Table Cells to Span Many Rows
To use the cell using more than one column, rowspan attribute is used.
Syntax <table style=”width:100%”> <tr> <th>Name</th> <th rowspan=”2”>Contact</th> </tr> <tr> <td>Jack Wilson</td> <td>283735273</td> <td>739273638</td> </tr> </table>
HTML Table – Adding a Caption
Use <caption> tag, to add caption to a table.
Syntax <table style=”width:100%”> <caption>Employee Records</caption> <tr> <th>Name</th> <th>Contact Number</th> </tr> <tr> <td>Jack Wilson</td> <td>283735273</td> </tr> </table>
Please Note: <caption> tag is used immediately after <table> tag.
Working With One Table
In order to add special style for a table, id attribute is used.
Syntax <table id=”a001”> <tr> <th>Firstname</th> <th>Lastname</th> <th>Contact Number</th> </tr> <tr> <th>Jack</th> <th>Wilson</th> <th>7637832983</th> </tr> </table>
Defining the style for table mentioned in above code:
table#a001 {
width:100%;
background-color:#ffffff;
}
This will make the changes to the background color of the table.
Let Us Do a Quick Revision <table> To define a table <tr> To define a table row <td> To define a table column <th> To define a table heading <caption> To define a table caption border To define a border border-collapse To collapse the cell borders padding To add padding to the cells text-align To align the cell text border-spacing To define the spacing between the cells rowspan To make a cell span many rows colspan To make a column span many sows id To add style to a table <colgroup> To add one or more columns in a table <col> To add a style to each column lying within a <colgroup> <thead> To group the header in a table <tbody> To group the body content in a table <tfoot> To group the footer content in a table
