HTML Tables
HTML table tag element is used to display data in table format with rows and columns. <table> is the tag used to create HTML tables, <tr> used to create a row and <td> used to create a table cell. <th> are used to define the column headings and it is optional.
HTML Table Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table>
<tr>
<th>Column Heading 1</th>
<th>Column Heading 2</th>
</tr>
<tr>
<td>HTML Table Row 1, Column 1</td>
<td>HTML Table Row 1, Column 2</td>
</tr>
<tr>
<td>HTML Table Row 2, Column 1</td>
<td>HTML Table Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
HTML Table Example Output
| Column Heading 1 | Column Heading 2 |
|---|---|
| HTML Table Row 1, Column 1 | HTML Table Row 1, Column 2 |
| HTML Table Row 2, Column 1 | HTML Table Row 2, Column 2 |
The above example is a simple HTML table. <th> is the tag used to markup the heading cell of the HTML table.
HTML Cellpadding and Cellspacing
- cellpadding - defines the space between the cell content and border. Pads the cell content from the borders.
- cellspacing - defines the space between the cells.
Cellpadding and Cellspacing Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table cellpadding, cellspacing example</title>
</head>
<body>
<table border="5" cellpadding="10" cellspacing="5">
<tr>
<td>Lion</td>
<td>Wild</td>
</tr>
<tr>
<td>Crocodile</td>
<td>Wild</td>
</tr>
</table>
</body>
</html>
cellpadding and cellspacing Example Output
| Lion | Wild |
| Crocodile | Wild |
In the above HTML table example, you can see the 5px spacing between the cells and that is defined by cellspacing. border is an attribute used to define the HTML table border width.There is a 10px spacing around the cell content which pads it from the cell border and it is defined by cellpadding.
HTML Colspan and Rowspan
- colspan attribute is to extend a HTML table column and merge it with subsequent columns.
- rowpspan attribute is to extend a HTML table row and merge it with subsequent rows.
Colspan and Rowspan Example
<!DOCTYPE html>
<html> <head> <title>HTML Table colspan, rowspan example</title> </head> <body> <table border="1"> <tr> <td colspan="2">Row1 Col1, spans with col2</td> <td>Row 1 Col 3</td> </tr> <tr> <td rowspan="2">Row2 Col1, spans with row3 </td> <td>Row 2 Col 2</td> <td>Row 2 Col 3</td> </tr> <tr> <td>Row 3 Col 2</td> <td>Row 3 Col 3</td> </tr> </table> </body> </html>
colspan and rowspan Example Output
| Row1 Col1, spans with col2 | Row 1 Col 3 | |
| Row2 Col1, spans with row3 | Row 2 Col 2 | Row 2 Col 3 |
| Row 3 Col 2 | Row 3 Col 3 | |
In the above HTML table example, first column has colspan attribute value of two and so it spans to the second column. Similarly, second row first column spans to third row. Remember rowspan is also applied on column level.
HTML Table Background, Height, Width
HTML table can have other attributes like background, height and width.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table border="5" cellpadding="10" cellspacing="5" background="#CFCFCF" height="200" width="300">
<thead>
<tr>
<th>Aniaml
</th>
<th>Type
</th>
</tr>
<tr>
<td>Lion</td>
<td>Wild</td>
</tr>
<tr>
<td>Crocodile</td>
<td>Wild</td>
</tr>
</table>
</body>
</html>
Output
| Animal | Type |
|---|---|
| Lion | Wild |
| Crocodile | Wild |
