Trying to center a HTML table with suggestions from another thread

StackOverflow https://stackoverflow.com/questions/22149119

Вопрос

I'm creating a table in html. Wanted the table to come out at the center of the screen, and found this question showing me exactly how to center the table in HTML.

However, as much as it did help make my table appear at the center of the screen, it also added an additional row, atop the first row when I added these lines to my code:

<table border="1px" align="center">
<td align=center valign=center>

Here's a preview of my current table (with slight distortions): 

<head>
    <style>
        table, th, td {
            border:1px solid black;
        }
    </style>
</head>

<body>
    <table border="1px" align="center">
        <td align=center valign=center>
            <col style="width: 200px" />
            <col style="width: 300px" span="2" />
            <tr>
                <th scope="row">Degree</th>
                <td colspan="2">Bachelor of Multimedia</td>
            </tr>
            <tr>
                <th scope="row">University</th>
                <td colspan="2">Universiti Utara Malaysia</td>
            </tr>
            <tr>
                <th rowspan="2">Contact</th>
                <th>Telephone</th>
                <th>Email</th>
            </tr>
            <tr align="center">
                <td>019-xxxxxxx</td>
                <td>blah@gmail.com</td>
            </tr>
    </table>
</body>

Это было полезно?

Решение

You don't need the second line of code you added you jsut need 

<table border="1px" align="center">

Remove 

<td align=center valign=center>

FIDDLE

Другие советы

The best way to have a table centered in a page is using the margin:0 auto in your CSS. If you want to use it inline(not a recommendation), use it this way: style="margin:0 auto". Try to use CSS property instead of border, align or valign.

But your real proble come from this line td align=center valign=center>. A td is a column that need to be in a tr(a row). But in fact, yo do not even need this line.

Hope this help!

Just remove the 2nd line of your code:

<td align=center valign=center>

and it should work, here is a fiddle

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top