Welcome to Day 05 of our 10-day HTML learning series! So far,
we’ve learned about the basics of HTML, including the
<head> and
<body> sections and
List
Today we are going to learn about Tables
.jpg)
What are HTML Tables?
HTML tables allow you to display data in rows and columns. They are commonly
used to show data in a structured way, such as pricing tables, schedules, or
product comparisons.
Tables are created using the
<table> tag, with
individual rows defined by
<tr> (table row), and
data cells defined by
<td> (table data).
Basic Structure of an HTML Table
Here's how you can create a simple table in HTML:
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Explanation:
-
<table>: Starts the table. -
<tr>: Defines a table row. -
<th>: Defines a header cell (bold and centered by default). -
<td>: Defines a standard data cell.
Example: Creating a Simple Table
Let's create a table that displays a list of fruits and their colors.
<table>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
<tr>
<td>Apple</td>
<td>Red</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
</tr>
<tr>
<td>Grapes</td>
<td>Purple</td>
</tr>
</table>
Explanation:
First Row (
<tr>): Contains header cells (<th>) for "Fruit" and "Color."
Next Rows: Each
<tr> contains data cells (<td>) with the name of the fruit and its color.
Adding Borders and Styling with CSS
By default, tables have no borders or styling. Let's add some basic
styles using CSS to make the table look nicer.
CSS Coder:
<style>
table {
width: 50%;
border-collapse: collapse; /* Combines borders for a
cleaner look */
}
th, td {
border: 1px solid black; /* Adds border to cells */
padding: 8px;
/* Adds space inside cells */
text-align: left; /*
Aligns text to the left */
}
th {
background-color: #f2f2f2; /* Light gray background for
headers */
}
</style>
Explanation:
table:
- width: 50%: Sets the table width to 50% of the container
- border-collapse: collapse: Merges the borders of the table cells for a cleaner look.
th, td:
- border: Adds a 1px solid black border around cells.
- padding: Adds space inside cells for better readability.
- text-align: Aligns the text to the left.
th:
- background-color: Sets a light gray background for header cells.
Understanding Table Tags
- <table>: The container for all table content.
- <tr>: Table row. Contains header or data cells.
- <th>: Table header cell. Bold and centered by default.
- <td>: Table data cell. Regular cell for data.
Practice Exercise
Try it yourself:
Create a table that lists three countries and their capitals.
Conclusion:
That's it for Day 05! 🎉 You've learned how to create and style tables in HTML.
Coming up next in Day 06: We'll explore HTML forms
Happy coding! 💻
.jpg&description=Tables in HTML | Day 05 of HTML Learning Series){kind=link}