Trying to make table vertical-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

If you need each color on its own table row then your missing some code

for each row you need:

<tr> <!-- Start of row -->
<td>Color 1</td>
</tr>  <!-- End of row -->

so your table code should look like:

<table>
<tr> <!-- 1st row -->
<td>Color 1</td>
</tr>  <!-- End of 1st row -->
<tr> <!-- 2nd row -->
<td>Color 2</td>
</tr>  <!-- End of 2nd row -->
<tr> <!-- 3rd row -->
<td>Color 3</td>
</tr>  <!-- End of 3rd row -->
</table>