DEV Community

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

Posted on • Updated 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.

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:

Top comments (0)

Read next

mikeyoung44 profile image

Unearthing Universal Feature Geometries: Sparse Autoencoders Reveal Crystal-like and Modular Structures

Mike Young -

navv23 profile image

Complete Linux Essentials!

Navaneethan Ghanti -

shieldstring profile image

Data Fetching in React

Agbo, Daniel Onuoha -

travislramos profile image

The Resurgence of Server-Side Rendering in the JavaScript Era

Travis Ramos -