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
