CSS Tables

Introduction to CSS Tables

In the world of web, tables are one of the most important tools for displaying data in a structured format. Since the emergence of CSS, designing and styling tables has become much simpler and more attractive. Utilizing CSS features allows us to present our tables in an organized, understandable, and appealing manner. For example, we can manage color schemes, cell spacing, font sizes, and many other features using CSS.

One of the most important reasons CSS is prevalent in table design is separating HTML structure from styling, providing beautiful and unique visual outputs for table information. This separation allows developers to implement diverse and tailored designs with detailed changes in CSS.

Tables are particularly necessary when displaying data such as reports, pricing tables, or timelines, making them very functional. These features help us provide a lot of information in a coherent and user-friendly manner to the users.

To get started with CSS tables, we first need to create a basic HTML table structure and then use CSS to style it. Below is a simple example of CSS effects on a generated table.

    <table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>30</td>
        <td>Iran</td>
    </tr>
    <tr>
        <td>Sara</td>
        <td>25</td>
        <td>France</td>
    </tr>
    </table>

In the code above, we created a simple table with three columns and two rows. Now we can add CSS as shown below:

    <style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    </style>

The CSS code we defined for the table includes:
table - Specifies the overall dimensions of the table and determines that the table borders are consolidated without spacing.
th, td - Defines the styling of the header and data cells in the table. In this example, we define margins, internal spacing, and horizontal positioning.
th - With this, we define a distinctive background color for header cells, allowing them to appear more prominent with a higher visual appeal.