CODEWITHSUNDEEP
htmlcss
user3211186
user3211186

Reputation: 115

How to center and span table heading (row)

I need to know how to center and span the "MyTable" heading. Can it be down with both HTML (the center tag) and CSS? I tried playing around with text-align, positioning etc but I couldn't get what I want.

Table examples

<!DOCTYPE html>
<html>
    <head>
        <style>

            th {
                border: 1px solid red;
                text-align: center;
            }

            td {
                border: 1px dashed black;
                color: red;
            }

            table {

                font-family: Calibri;
            }
        </style>
    </head>
    <body>
        <table>
            <tr><th>My Table</th></tr>
            <tr><th>FName</th><th>LName</th><th>Age</th></tr>
            <tr><td>Derp</td><td>Derpania</td><td>69</td></tr>
            <tr><td>Buzz</td><td>Killington</td><td>42</td></tr>
        </table>
    </body> 
</html>

If there's a solution in both CSS and HTML, please give me both.

Upvotes: 2

Views: 4500

Answers (1)

emmanuel
emmanuel

Reputation: 9615

You have to add colspan to the th element.

    <table>
        <tr><th colspan="3">My Table</th></tr>
        <tr><th>FName</th><th>LName</th><th>Age</th></tr>
        <tr><td>Derp</td><td>Derpania</td><td>69</td></tr>
        <tr><td>Buzz</td><td>Killington</td><td>42</td></tr>
    </table>

Fiddle: http://jsfiddle.net/y0tyapz6/

Upvotes: 2

Related Questions