1. Table title position

By default, the caption is at the top of the table, which can be changed using the Caption -size property. It can take either top or bottom to define the table title above or below the table. Example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            table{
                caption-side: bottom;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>The table header</caption>
            <tr>
                <th>Table header cell 1</th>
                <th>Table header cell 2</th>
            </tr>
            <tr>
                <td>First row, first column</td>
                <td>First row, second column</td>
            </tr>
            <tr>
                <td>Second row, first column</td>
                <td>Second row, second column</td>
            </tr>
        </table>
    </body>
</html>
Copy the code

It looks like this in the browser:

Table border merge

Add a border to the table item and it will look like this in the browser:

To make their borders merge, use the border-collapse property to remove gaps between borders. It has two values: separate (border collapse, default) and collapse (border collapse), as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            table{
                caption-side: bottom;
                border-collapse: collapse;
            }
            table.th.td{border:1px solid black}
        </style>
    </head>
    <body>
        <table>
            <caption>The table header</caption>
            <tr>
                <th>Table header cell 1</th>
                <th>Table header cell 2</th>
            </tr>
            <tr>
                <td>First row, first column</td>
                <td>First row, second column</td>
            </tr>
            <tr>
                <td>Second row, first column</td>
                <td>Second row, second column</td>
            </tr>
        </table>
    </body>
</html>
Copy the code

How it looks in the browser:

As you can see, the gaps between adjacent cell borders have been merged.

3. Table border spacing

Use border-spacing to define table border spacing (this property does not work if table borders are not merged, if border-collapse: collapse is set), as shown in the following example:

<! DOCTYPEhtml>
<html>
    <head>
        <meta name="keywords" content="Personal homepage, HTML study notes"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="Learning Examples"/>
        <meta name="copyright" content=All rights reserved. Please contact us before reprinting./>
        <style type="text/css">
            table{
                caption-side: bottom;
                border-spacing: 10px;
            }
            table.th.td{border:1px solid black}
        </style>
    </head>
    <body>
        <table>
            <caption>The table header</caption>
            <tr>
                <th>Table header cell 1</th>
                <th>Table header cell 2</th>
            </tr>
            <tr>
                <td>First row, first column</td>
                <td>First row, second column</td>
            </tr>
            <tr>
                <td>Second row, first column</td>
                <td>Second row, second column</td>
            </tr>
        </table>
    </body>
</html>
Copy the code

It looks like this in the browser: