When it comes to designing a layout for a particular purpose with information on a web page, tables are a powerful tool in HTML. They are one of the oldest HTML tags but they work well with web pages for microcontrollers since they are very small in size (approx in kbs). Tables are used for layouts since the physical computing devices have very limited memory on the chip.
They allow you to organize data in a readable format. Whether it’s a list of your favorite footballers, the results of a science experiment, or your favorite sports teams, tables are a great way to show information in a structured manner.
HTML tables have rows and columns, and each cell in the table can contain other HTML elements which have been discussed in the (previous articles). Creating a table is a simplified process, and with just a few basic tags, you can have a table created for organizing your data.
Constructing a Table in HTML
- Start by opening the table tag <table>. This will be the main container for your table.
- For each row in the table, open the table row tag <tr>. This tag defines a row in your table.
- For each cell in the row, open the table data tag <td>. This tag defines a cell in the row.
- Type the content for each cell.
- Close the table data tag </td> for each cell.
- Close the table row tag </tr> for each row.
- Close the table tag </table> when you’re done.
Here’s what the code for a table of your past projects might look like:
Download the full code from the link here.
<table> <tr> <td>Projects</td> <td>Category</td> <td>Year</td> </tr> <tr> <td>IoT Home</td> <td>IoT</td> <td>2009</td> </tr> <tr> <td>LiFi</td> <td>Communication</td> <td>2012</td> </tr> <tr> <td>Augmented Reality</td> <td>AI</td> <td>2015</td> </tr> </table>
And this is what it would look like in a web browser:
Tables are a great way to organize data in HTML. They provide a clear and easy-to-read format for information. Now that you know how to create tables in HTML, you can start organizing your own data and showing it off on your website. Moreover, you will be able to create web server pages for the microcontrollers which are necessary for Internet of Things (IoT).
One Reply on “Organizing Data in a Table using HTML for kids”