Hello, budding developers! In today's lesson, we'll delve into creating and arranging HTML tables. HTML tables are a cornerstone tool used to present data in a structured, easily digestible format on web pages. They can bring an intricate spreadsheet, or a neatly arranged menu at a restaurant, to your webpage. This lesson will walk you through the process of creating a simple HTML table, helping you understand its various components, and teaching you how to use different attributes to enhance it.
Understanding the structure of HTML tables is as straightforward as focusing on three fundamental building blocks — tables, rows, and cells, each represented as an HTML tag:
<table>: This tag commences and concludes the table.<tr>: This tag marks the beginning and end of each "table row" in our table.<th> and <td>: These are designed to denote the "table header" and "table data" cells in a row. The <th> tag is typically used for header cells (column titles), and <td> is used for the more conventional data cells.For instance, let's construct a two-by-two table:
HTML, XML1<table> 2 <tr> 3 <th>Header 1</th> 4 <th>Header 2</th> 5 </tr> 6 <tr> 7 <td>Data Cell 1 on First Row</td> 8 <td>Data Cell 2 on First Row</td> 9 </tr> 10 <tr> 11 <td>Data Cell 1 on Second Row</td> 12 <td>Data Cell 2 on Second Row</td> 13 </tr> 14</table>
This table creates a two-column structure with a header row housing "Header 1" and "Header 2," and a data row that stores "Data Cell 1" and "Data Cell 2." hence the 2 <td> elements in each <tr>.
Like a gem, tables can be polished and refined. border and width are two key attributes that assist in formatting the table.
The border outlines the thickness of the table's boundary. The border attribute value is a relative size, not a fixed unit, and the actual pixel size may vary depending on the browser's default styling. We define it as follows:
HTML, XML1<table border="2"> 2 <!-- Table content --> 3</table>
The width attribute is an essential tool to control a table's overall size. Specifically, it dictates the width of the table within a web page. We can assign it an absolute value in pixels (like px) or a relative value in percentage (%). The absolute value assigns a fixed width regardless of window size, while the percentage assigns relative width based on the browser window size.
HTML, XML1<table width="500"> <!-- absolute value in pixels --> 2 <!-- Table content --> 3</table> 4<table width="50%"> <!-- relative value (percentage of browser window's width) --> 5 <!-- Table content --> 6</table>
In the above example, the table's width is fixed at 500 pixels. Irrespective of the size of the web browser window, the table retains its width. In contrast, in the second example, the table's width is 50% of the browser window's width. If you resize the browser window, the table's width adjusts dynamically to maintain its width as half of the window's width. The width attribute gives you control over the layout and display of your HTML tables, helping you build more flexible and responsive designs.
What about providing some breathing space for the data in our table? We can achieve this uniform gap between table cells with the cellspacing attribute. Another useful attribute is cellpadding which provides space between the cell wall and its content.
Let's incorporate cellspacing and cellpadding into our table:
HTML, XML1<table border="2" width="90%" cellspacing="10" cellpadding="10"> 2 <tr> 3 <th>Header 1</th> 4 <th>Header 2</th> 5 </tr> 6 <tr> 7 <td>Data Cell 1</td> 8 <td>Data Cell 2</td> 9 </tr> 10</table>
In a table, sometimes we want a cell to stretch across more than one row or column. That's when rowspan and colspan come in handy.
Let's imagine our table as a grid of cells. Normally, each cell occupies one square on this grid. However, rowspan and colspan allow us to make a cell extend over multiple squares.
When we use rowspan, we're making a cell stretch vertically across multiple rows. For example, rowspan="2" means that cell will span two rows. Similarly, with colspan, we're making a cell stretch horizontally across several columns. colspan="3" will make a cell span three columns.
Consider our table with rowspan and colspan:
HTML, XML1<table border="2" width="90%" cellspacing="10"> 2 <tr> 3 <th rowspan="2">Header 1</th> 4 <th>Header 2</th> 5 <th>Header 3</th> 6 </tr> 7 <tr > 8 <td colspan="2">Data Cells 1</td> 9 </tr> 10</table>
Effectively, this is what happens:
rowspan="2".colspan="2".Every cell still retains its original height and width unless specified otherwise. Pictures and text within the cells will adjust according to the larger cell size.
Here is a visual representation of the table:
Before applying rowspan and colspan:
1+----------------+----------------+----------------+
2| Header 1 | Header 2 | Header 3 |
3+----------------+----------------+----------------+
4| Data Cells 1 | | |
5+----------------+----------------+----------------+Each cell takes up one space.
After applying rowspan="2" to "Header 1" and colspan="2" to "Data Cells 1", the table would look like this:
1+----------------+----------------+----------------+
2| Header 1 | Header 2 | Header 3 |
3| +----------------+----------------+
4| | Data Cells 1 |
5+----------------+---------------------------------+As you see, "Header 1" extends over two rows vertically and "Data Cells 1" stretch across two columns horizontally.
Well done! You've now mastered the creation of HTML tables from scratch, gained understanding of key table tags (<table>, <tr>, <th>, <td>), and learned to manipulate a variety of table attributes (border, width, cellspacing, rowspan, and colspan). You're now equipped to create a wide variety of tables on your webpage.
Next up are some hands-on exercises. They are designed to reinforce your understanding of the tables we've learned about today, and they offer a golden opportunity for you to apply your newly-acquired skills. So, let's start the challenge! We look forward to discussing this in our next lesson.