DEV Community

Cover image for Day 4: Creating Tables in HTML
Dipak Ahirav
Dipak Ahirav

Posted on

Day 4: Creating Tables in HTML

#html #css #javascript #beginners

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Styling Tables with CSS

To style tables, you can use CSS. Here are some common CSS properties for tables:

  1. Table Borders: 
   table, th, td {
       border: 1px solid black;
       border-collapse: collapse;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Padding and Text Alignment: 
   th, td {
       padding: 10px;
       text-align: left;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Table Width and Background Color: 
   table {
       width: 100%;
       background-color: #f2f2f2;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Striped Rows: 
   tr:nth-child(even) {
       background-color: #f2f2f2;
   }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)

Read next

hazarnenni profile image

An In-Depth Look at Hono.js for Cloud-Native Development

Hazar nenni -

siddharthssb11 profile image

Polling Requests to an API in JavaScript

Siddharth Singh Bhadauriya -

hayyanstudio profile image

9 Essential Tips for Writing Efficient Shaders

Haider Aftab -

mikeyoung44 profile image

NV-Embed: Improved Techniques for Training LLMs as Generalist Embedding Models

Mike Young -