HTML tables are used to display data in a tabular format. these are created using the <table> tag and consist of
- header: defined using the <th> tag
- rows: defined using the <tr> tag
- cell : defined using the <td> tag.
Here is an example of a basic HTML table:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
!DOCTYPE html> <html> <head> <title>My Page Title</title> <link rel="img" type="image/x-icon" href="/images/favicon-img.ico"> </head> <body> <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> <tr> <td>Row 3, Cell 1</td> <td>Row 3, Cell 2</td> </tr> </table> </body> </html> |
We can also specify the number of columns and rows a table should have using the colspan and rowspan attributes. Also, we can use CSS to style the table, such as adding borders, changing the background color, and adjusting the font size.
Below is the example with different style in table:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <title>My Page Title</title> </head> <body> <table style="width:100%"> <tr> <th style="border:2px solid #ddd; padding: 10px;">Header 1</th> <th style="border:2px solid #ddd; padding: 10px;">Header 2</th> </tr> <tr> <td style="border:2px solid #ddd; padding: 10px;">Row 1, Cell 1</td> <td style="border:2px solid #ddd; padding: 10px;">Row 1, Cell 2</td> </tr> <tr> <td style="border:2px solid #ddd; padding: 10px;">Row 2, Cell 1</td> <td style="border:2px solid #ddd; padding: 10px;">Row 2, Cell 2</td> </tr> </table> </body> </html> |
Note: it’s recommended to use CSS to style the tables rather than using the in-line style as it makes the code more readable and maintainable.