You are already aware that a table is a way to organize data in rows and columns.
The HTML defines a table with <table> element.
A table starts with <table> tag and ends with </table> tag. Inside we define multiple <tr> elements.
Each <tr> element contains multiple <td> elements.
Before getting into a deeper discussion, let's see an example of a basic HTML table.
Below is a table of students marks in different subjects.
Name | Math | English | History |
---|---|---|---|
Edwin Miller | 75 | 80 | 66 |
Jacob Johnson | 65 | 56 | 60 |
Steve Thompson | 71 | 81 | 79 |
Isabella Robinson | 67 | 51 | 45 |
Benjamin Mitchell | 40 | 42 | 51 |
Let's see how this simple table will be coded in HTML.
Let's see the complete example. Click on 'Result on Editor' to view the output.
So basically, looking at the code above, we can say that:
To define a table, we will use the HTML <table> element.
Each row is defined with <tr> element.
The data is defined with <td> element.
Only the data of table headers are defined with <th> element.
The HTML <tr> element defines the table row.
A table can have multiple table rows.
The
is the short name for the table row.It is not an empty element. Hence a table row starts with an opening <tr> tag and ends with a closing </tr> tag.
The table data elements are written between the <tr> and </tr> tags.
The HTML <td> element defines the table data.
The
is the short name for the table data.Content of the each table cell is written between the opening <td> and closing </td> tags.
The <td> can be nested with other elements. It means we can write other HTML elements inside the <td> tags.
For example, it can contain elements like <a>, <img>, <p> and <table> etc.
Let's see an example.
The
is the short name for the table header.The <th> element is the same as the <td> element. The only difference is that we use it for the table heading cells.
The cell content is written between the start tag <th> and the end tag </th>.
Generally, only the first <tr> element contains <th> elements.
But it is not necessary, as in the case of vertical table headers other <tr> elements can also contain <th> elements.
By default, browsers make the content of <th> element bold.
You can change the look of the <th> element by applying a style attribute to it.
1. HTML Tutorial |
2. Introduction to HTML |
3. Basic HTML Page |
4. HTML Editors |
5. Web Browser |
6. HTML History |
7. Basic HTML Tags |
8. HTML Elements |
9. HTML Attributes |
10. HTML Headings |
11. HTML Paragraphs |
12. HTML Text Formatting |
13. HTML Styles |
14. HTML Comment |
15. HTML Quotation |
16. HTML Colors |
17. HTML RGB Colors |
18. HTML HEX Colors |
19. HTML HSL Color |
20. HTML CSS |
21. HTML Links |
22. HTML Link Colors |
23. Link within Page |
24. HTML Images |
25. HTML Background Image |
26. HTML Image Map |
27. HTML Picture Element |
28. HTML Favicon |
29. HTML Table |
30. HTML Table Border |
31. HTML Table Size |