The Ultimate HTML TABLES Guide in 2024: A Beginner’s Roadmap
Day 2: Mastering Tables in Web Development
Hey Fellow Learners! 👨💻👩💻
Welcome to Day 2 of your Web Development journey! By now, you’ve likely dipped your toes into the fundamentals, and today we’re diving into one of the most crucial elements of web design and development: tables.
You might think tables are a basic feature, but they’re incredibly powerful when it comes to displaying data in a clean, organized way. From representing lists of information to displaying structured data like databases, understanding how to effectively use tables is an essential skill for any web developer.
In this session, you will learn:
- Table Structuring Tags
- List Tags: Ordered, Unordered, Description List
- Row and Column Hierarchy
- Various Examples with Code
Table Structuring Tags:
You can use <table> — — — — </table> to create a table. You may use <thead>, <tbody>, <tfooter> to organize the data in a better way; as the name suggests, you may use these elements to structure header rows, footer rows and body (middle rows) separately. You may consider them to be as same as <div> tag or <section> tag which does nothing but helps to organize the data.
<table>
<thead>
<th> Header Column 1 </th>
<th> Header Column 2</th>
</thead>
</table>- <tr> — row
- <th> — header row (implicitly, aligns the content to centre, adds bold)
- <td> — cell
Understand that the data in HTML tables is entered row wise.
The above websites covers up the concepts in a recap manner, you may commit changes to the code and see the results as well.
List Tags:
- Unordered List: <ul> — — — — </ul> will generate a list in the form of bullets in once you enter your data inside <li> — — — — </li> nested within <ul>.
- Ordered List: <ol> — — — —</ol> will genrate a list in the form of specified bullet point (Alphabet (capital / small), roman, numeric, etc) which can be specified by using type attribute inside the <ol> tag.
- Description List: <dl> — — — — </dl> will generate a list with a Key-Description relation, you may enter your key inside <dt> — — — — </dt> — description term and its description inside <dd> — — — — </dd> — description definition.
NOTE: You may also use these tags inside the table, will be shown through an example in later section.
Row and Column Hierarchy:
1. Rowspan: Merge Cells Vertically
The rowspan attribute allows a table cell to span multiple rows. It is useful when you want to combine cells vertically for grouping data under one category.
<td rowspan="2">Merged Cell</td>In this example, the cell will occupy two rows. The value of rowspan defines how many rows the cell will span.
2. Colspan: Merge Cells Horizontally
The colspan attribute lets a table cell span across multiple columns. It's particularly useful when you need to create header rows or combine cells horizontally for a cleaner layout.
<td colspan="2">Merged Cell</td>In this case, the cell will occupy two columns. The value of colspan specifies how many columns the cell will span.
Various Example with Codes:
I have created a small project only to define the aspects of a table using various tags. You may copy and alter the data in your own environment to have hands on experience.
Firstly, I added the output of the code so that you may brainstorm that what you could have done to get the same or similar output. I have made use of <mark> — — — — </mark> tag from the previous article.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Making Practice</title>
</head>
<body style="text-align: center;">
<header>
<h1>Table Generation Practice</h1>
<h3>Type of the table is provided in the caption</h3>
</header>
<hr>
<main>
<section>
<table border="1">
<caption><mark>Header Row</mark></caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Phone No.</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Kristine</td>
<td>26</td>
<td>675-678</td>
<td>London</td>
<td>United Kingdom</td>
</tr>
<tr>
<td>Avinash</td>
<td>28</td>
<td>983-678</td>
<td>Bangalore</td>
<td>India</td>
</tr>
<tr>
<td>Lie Xing</td>
<td>27</td>
<td>765-433</td>
<td>Shanghai</td>
<td>China</td>
</tr>
</table>
</section>
<hr>
<section>
<table border="1">
<caption><mark>Header Column</mark></caption>
<tr>
<th>Monday</th>
<td>No</td>
</tr>
<tr>
<th>Tuesday</th>
<td>Yes</td>
</tr>
<tr>
<th>Wednesday</th>
<td>Yes</td>
</tr>
<tr>
<th>Thursday</th>
<td>No</td>
</tr>
<tr>
<th>Friday</th>
<td>No</td>
</tr>
<tr>
<th>Saturday</th>
<td>Yes</td>
</tr>
<tr>
<th>Sunday</th>
<td>NIL</td>
</tr>
</table>
</section>
<hr>
<section>
<table border="1">
<caption style="caption-side: bottom;"><mark>Header Column and Row</mark></caption>
<tr>
<th></th>
<th>London</th>
<th>Singapore</th>
<th>Bombay</th>
<th>New York</th>
<th>Shanghai</th>
</tr>
<tr>
<th>London</th>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Singapore</th>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Bombay</th>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>New York</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<th>Shanghai</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
</tr>
</table>
</section>
<hr>
<section>
<table>
<caption><mark>Images in Cells</mark></caption>
<tr>
<th>2019</th>
<th>2018</th>
<th>2017</th>
</tr>
<tr>
<td><img src="C:\Users\Tonhon\Downloads\cuisine.jpeg" alt=""></td>
<td><img src="C:\Users\Tonhon\OneDrive\Pictures\PSC JAIN MEMORIES 4.JPG" alt=""></td>
<td><img src="C:\Users\Tonhon\OneDrive\Pictures\PSC JAIN MEMORIES 4.JPG" alt=""></td>
</tr>
</table>
</section>
<hr>
<section>
<table border="3">
<tr>
<th>Name</th>
<th>Skills</th>
</tr>
<tr>
<td>John</td>
<td>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</td>
</tr>
</table>
</section>
<hr>
<section>
<table border="1">
<caption><mark>Student Grades</mark></caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Subject</th>
<th scope="col">Grade</th>
</tr>
<tr>
<td scope="row">Alice</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td scope="row">Bob</td>
<td>Science</td>
<td>B</td>
</tr>
</table>
</section>
<hr>
<section>
<table border="1">
<caption><mark>Col Hierarchy</mark></caption>
<tr>
<th>Name</th>
<th>Age</th>
<th colspan="2">Travel</th>
</tr>
<tr>
<td>John</td>
<td>22</td>
<th>Bombay</th>
<th>London</th>
</tr>
<tr>
<td>Hamsphire</td>
<td>34</td>
<th>Chicago</th>
<th>Bangkok</th>
</tr>
<tr>
<td>Avinash</td>
<td>28</td>
<th>Macau</th>
<th>Tokyo</th>
</tr>
</table>
</section>
<hr>
<section>
<table border="1">
<caption><mark>Row Hierarchy</mark></caption>
<tr>
<th></th>
<th></th>
<th>CS Architecture</th>
<th>Operating System</th>
<th>Engineering Mathematics</th>
<th>Computer Networks</th>
</tr>
<tr>
<td rowspan="2">Date</td>
<td>Start</td>
<td>Dec 2024</td>
<td>Dec 2024</td>
<td>Dec 2024</td>
<td>June 2025</td>
</tr>
<tr>
<td>End</td>
<td>Mar 2025</td>
<td>Mar 2025</td>
<td>Mar 2025</td>
<td>August 2025</td>
</tr>
</table>
</section>
</main>
<hr>
<footer>
<h4>23 December 2024</h4>
</footer>
</body>
</html>If you found this helpful, don’t forget to give it a thumbs up and share your thoughts in the comments. Your support means the world! 🌍
“Try modifying the tables, play around with the rows and columns, and see how you can make your own creative designs! Keep experimenting and learning.”
Happy coding! 💻✨
