Basic Table Creation

How do you create a basic HTML table?

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Adding Borders to Tables

<table border="1">
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Spanning Rows and Columns

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td rowspan="2">Spans 2 rows</td>
        <td>Data 1</td>
    </tr>
    <tr>
        <td>Data 2</td>
    </tr>
</table>

Styling Tables

<table style="width:100%; border-collapse: collapse;">
    <tr style="background-color: #f2f2f2;">
        <th style="padding: 8px; text-align: left;">Name</th>
        <th style="padding: 8px; text-align: left;">Age</th>
    </tr>
    <tr>
        <td style="padding: 8px; text-align: left;">John</td>
        <td style="padding: 8px; text-align: left;">30</td>
    </tr>
</table>

How to Create Table Headers

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
</table>

How to place Cell Padding and Cell Spacing in a Table

<table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <td>Cell with padding and spacing</td>
        <td>Another cell</td>
    </tr>
</table>

How to Align Table content

<table border="1">
    <tr>
        <td align="left">Left-aligned text</td>
        <td align="right">Right-aligned text</td>
    </tr>
</table>

How to Create Nested Tables

<table border="1">
    <tr>
        <td>
            <table border="1">
                <tr>
                    <td>Nested Table Cell</td>
                </tr>
            </table>
        </td>
        <td>Main Table Cell</td>
    </tr>
</table>

How to create Responsive Tables

<div style="overflow-x:auto;">
    <table border="1">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </table>
</div>

How to use Tables for Layout

<table width="100%">
    <tr>
        <td width="50%">Left Column</td>
        <td width="50%">Right Column</td>
    </tr>
</table>