Tables

Margins

See using margins

Width and Height

Use width and height on row or cell.

For width, you can also use col-element inside colgroup.

Example:

    <table style="text-align: center;">
        <tr style="height: 20mm;">
            <td style="width: 60mm">
                1
            </td>
            <td>
                2
            </td>
        </tr>
        <tr>
            <td style="height: 40mm;">
                3
            </td>
            <td style="width: 20mm">
                4
            </td>
        </tr>
    </table>

    <table>
        <colgroup>
            <col style="width: 6cm;" />
            <col style="width: 3cm;" />
            <col style="width: 3cm;" />
            <col style="width: 1cm;" />
        </colgroup>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

Text Alignment

For vertical alignment, use vertical-align.

For horizontal alignment, use text-align.

Example:

    <table style="text-align: center;">
        <tr style="height: 30mm;">
            <td style="vertical-align: top; width: 60mm">
                Top
            </td>
            <td style="vertical-align: center;">
                Center
            </td>
            <td style="vertical-align: bottom;">
                Bottom
            </td>
        </tr>
    </table>

Borders

Borders can be set for cells in a table.

Collapse Borders

To collapse borders (i.e., a single line for adjacent cells), use border-collapse:

    table {
        border-collapse: collapse;
    }

    th, td {
        border: solid;
        border-width: 1px 1px;
    }

Hide Borders

Visibility of borders can be controlled per cell using border-style and per side using border-right-style etc. Example:

    <table>
        <tr>
            <td style="border-left-style: hidden; border-right-style: hidden;">1</td>
            <td style="border-left-style: hidden;">2</td>
            <td style="border-style: hidden;">3</td>
            <td style="border-bottom-style: hidden; border-right-style: hidden;">4</td>
        </tr>
    </table>

Note that, to hide the border between cells, both cells must hide them at the corresponding side.

Merge Columns

Columns can be merged using colspan-attribute.

Example:

    <table>
        <colgroup>
            <col style="width: 6cm;" />
            <col style="width: 3cm;" />
            <col style="width: 3cm;" />
            <col style="width: 1cm;" />
        </colgroup>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td colspan="2">1+2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>

Nesting Tables

Nesting tables is supported. Example:

    <table style="text-align: center;">
        <colgroup>
            <col style="width: 6cm;" />
            <col style="width: 3cm;" />
            <col style="width: 3cm;" />
            <col style="width: 1cm;" />
        </colgroup>
        <tr>
            <td colspan="2">
                <table style="text-align: left; margin-left: 20mm;">
                    <colgroup>
                        <col style="width: 2cm;" />
                        <col style="width: 2cm;" />
                        <col style="width: 1cm;" />
                    </colgroup>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                        1+2
                        </td>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                </table>
            </td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>