HTML tables are convenient for storing large bundles of information in a neat way. The example code below will create a table with 4 rows and 3 colums
<table> <tr> <th>Planet Name</th> <th>Planet Image</th> <th>Planet Link</th> </tr> <tr> <td>Earth</td> <td><img src="https://blog.softwareadvice.com/wp-content/uploads/2012/07/Earth-Thumbnail.png" alt="Earth"></td> <td><a href="https://en.wikipedia.org/wiki/Earth">Earth Information</a></td> </tr> <tr> <td>Mars</td> <td><img src="https://realworldglobes.com/assets/images/thumbnails/2012_mars-a_01m_thumbnail.jpg" alt="Mars"></td> <td><a href="https://en.wikipedia.org/wiki/Mars">Mars Information</a></td> </tr> <tr> <td>Jupiter</td> <td><img src="https://s-media-cache-ak0.pinimg.com/236x/4b/e5/b9/4be5b9ae2b6674027cb0a7151b50cf42.jpg" alt="Jupiter"></td> <td><a href="https://en.wikipedia.org/wiki/Jupiter">Jupiter Information</a></td> </tr> </table>
Above we have the table element, the tr or Table Row element, the th or Table Header element and td or Table Data element. The table header and table data elements must be within a table row elements.
Tables can seem difficult at first because there several tags used in a table. The best way to learn is to take the example above and play with the code. You might break some things, but learning to fix it will only help you to understand better in the end.
The next sections of the tutorial will expand on tables a bit more.
This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.
Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.
Copyright 2017 Step By Step HTML. All Rights reserved.