Trying to make table vertical

July 31, 2022

I’m just trying to get some help making the table in vertical alignment. My problem is that it shifted the td text to the left.

<!DOCTYPE HTML>
   
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table,td, th{
    border: 1px solid black;
    border: double;
}
td{
    display: table-row;
    vertical-align: middle;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
    <tr>
    <td style="background-color:#ffffcc;">
        #ffffcc
    </td>
    <td style="background-color:#66ffff;">
        #66ffff
    </td>
    <td  style="background-color:#ffff22;">
        #ffff22
    </td>
    <td  style="background-color:#999999;">
        #999999
    </td>
    <td  style="background-color:#ff0000;">
        #ff0000
    </td>
    <td  style="background-color:#ff8429;">
        #ff8429
    </td>
</tr>
</table>
</body>
</html>

This is what it should look like but it doesn’t

This is what it actually looks like

This is what it looks like but it needs the colors to fill the table and the text to be the center

>Solution :

Try this!
Hope it helps 🙂

<!DOCTYPE HTML>
   
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table, th {
    border: 1px solid black;
    border: double;
}
td {
    display: block;
    text-align: center;
    border: 2px solid gray;
}

</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
    <tr>
    <td style="background-color:#ffffcc;">
        #ffffcc
    </td>
    <td style="background-color:#66ffff;">
        #66ffff
    </td>
    <td  style="background-color:#ffff22;">
        #ffff22
    </td>
    <td  style="background-color:#999999;">
        #999999
    </td>
    <td  style="background-color:#ff0000;">
        #ff0000
    </td>
    <td  style="background-color:#ff8429;">
        #ff8429
    </td>
</tr>
</table>
</body>
</html>