Welcome to Day 4 of your journey to mastering HTML and CSS! Today, we will explore how to create and style tables in HTML. Tables are useful for displaying data in a structured format. By the end of this post, you'll be able to create and style tables for your web pages.
please subscribe to my YouTube channel to support my channel and get more web development tutorials.
An HTML table is defined with the <table> tag. Each row is defined with the <tr> (table row) tag, and each cell is defined with the <td> (table data) tag. Table headers are defined with the <th> (table header) tag.
Here's a simple example of an HTML table:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
Adding Borders
To add borders to your table, you can use the border attribute directly in the <table> tag:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
Spanning Columns and Rows
You can span columns using the colspan attribute and rows using the rowspan attribute.
<table border="1">
<tr>
<th colspan="2">Header 1 & 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2">Data 1 & 4</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
Styling Tables with CSS
To style tables, you can use CSS. Here are some common CSS properties for tables:
- Table Borders:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
- Padding and Text Alignment:
th, td {
padding: 10px;
text-align: left;
}
- Table Width and Background Color:
table {
width: 100%;
background-color: #f2f2f2;
}
- Striped Rows:
tr:nth-child(even) {
background-color: #f2f2f2;
}
Here's a complete example with CSS styling:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Table</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
table {
width: 100%;
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<h1>HTML Table with CSS Styling</h1>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
Summary
In this blog post, we explored how to create and style tables in HTML. We learned about basic table structure, adding borders, spanning columns and rows, and styling tables with CSS. Practice creating and styling tables to organize your data effectively.
Series Index
| Part | Title | Link |
|---|---|---|
| 1 | Day 1: Getting Started with HTML | Read Part 1 |
| 2 | Day 2: Text Formatting and Links in HTML | Read Part 2 |
| 3 | Day 3: Lists and Images in HTML | Read Part 3 |
| 4 | Day 4: Creating Tables in HTML | Read Part 4 |
| 5 | Day 5: Creating Forms in HTML | Read Part 5 |
| 6 | Day 6: Introduction to Semantic HTML | Read Part 6 |
| 7 | Day 7: Introduction to CSS | Read Part 7 |
Stay tuned for Day 5, where we will cover forms and their uses in HTML. Happy coding!
Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!
Follow and Subscribe:
- Website: Dipak Ahirav
- Email: dipaksahirav@gmail.com
- Instagram: devdivewithdipak
- YouTube: devDive with Dipak
- LinkedIn: Dipak Ahirav
Top comments (0)