2

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.

user3211186
  • 115
  • 2
  • 13
  • Never heard of `colspan`? – Jongware Oct 13 '14 at 23:22
  • 1
    Actually, no. I just started learning HTML and CSS and I didn't come across colspan. Thank you anyway... – user3211186 Oct 13 '14 at 23:26
  • Fair enough; it seems not as primary a function as I believed. Inspecting the first 10 or so 'html tables for beginners' links, `colspan`, and its vertical counterpart `rowspan`, is only first mentioned in link #3. – Jongware Oct 13 '14 at 23:30
  • - This may interest you: [HTML colspan in CSS](http://stackoverflow.com/questions/2403990/html-colspan-in-css) (and the consensus seems to be "you cannot"/"you should not"). – Jongware Oct 13 '14 at 23:32

1 Answers1

2

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/

emmanuel
  • 9,607
  • 10
  • 25
  • 38