An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Everything you should know about HTML tables
This article was originally published at https://www.blog.duomly.com/how-to-build-an-html-table-tutorial/
When you are building a project which has some data to present, you need a good way to show the information easily and understandably. Depending on the type of data, you can select between different HTML elements.
In many cases, the table is the most convenient method to display large amounts of structured data nicely. Thats why in this article, Id like to explain to you the structure of the table, show you how to create one, and give you a little advice when its a good idea to present your data as a table.
If you prefer to watch then read, I have a video version for you right here.
Lets start and become an HTML tables master!
1. HTML table structure - whats inside?
HTML tables consist of multiple elements, and each of those elements has different tags.
The first element which you have to use is <table>
tag, which is a kind of container for elements that are building a table. And inside of this container, you have to put other elements like rows, columns, or cells.
In the image below, you can see what elements are part of the most basic table.
<tr>
- a tag that should be created at first inside the table. It's used to build row. It's easy to remember because you can think bout tr as a table row.
Then, inside the row, you need to create the cells, which could also be considered as creating the columns. You can do it using two different tags, according to the needs:
<th>
- it's an option to create header cells.<td>
- it's used to build plain cells, and you can put as many <td>
elements per row as you wish.
Lets take a look at short example:
<tr> <th>id</th></tr><tr> <td>1</td></tr>
The tags described above are just basic elements that you have to use to create an HTML table. There are some more HTML tags that can help you to build more advanced tables with additional elements. Let's see the image:
<caption>
allows adding a caption or title for your table. It should be used directly after opening
Original Link: https://dev.to/duomly/everything-you-should-know-about-html-tables-3iik
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To