Day 4: Creating Tables in HTML
Tags: html, css, javascript, beginners
Published: 2024-06-06 03:18:49

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](https://www.youtube.com/@DevDivewithDipak) 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:

```html
<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:

```html
<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.

```html
<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:

1. **Table Borders**:
   ```css
   table, th, td {
       border: 1px solid black;
       border-collapse: collapse;
   }
   ```

2. **Padding and Text Alignment**:
   ```css
   th, td {
       padding: 10px;
       text-align: left;
   }
   ```

3. **Table Width and Background Color**:
   ```css
   table {
       width: 100%;
       background-color: #f2f2f2;
   }
   ```

4. **Striped Rows**:
   ```css
   tr:nth-child(even) {
       background-color: #f2f2f2;
   }
   ```

Here's a complete example with CSS styling:

```html
<!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.

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] (https://www.dipakahirav.com)
- **Email**: dipaksahirav@gmail.com
- **Instagram**: [devdivewithdipak](https://www.instagram.com/devdivewithdipak)
- **YouTube**: [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak)
- **LinkedIn**: [Dipak Ahirav](https://www.linkedin.com/in/dipak-ahirav-606bba128)