HTML Table: Alignment and cell height

This entry is part 16 of 16 in the series HTML Table

Similar to Excel, we can align the text in the cell to the left, center or to the right.

The cell height could be set as well.
Output

Here in this example, we set the text to align vertically and in the center of the cell.

The height of the cell has been increased as well.

HTML Code
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
    <style>
        table {
            width: 60%;
            border-style: solid;
            border-width: 1px;
            padding: 5px;
            border-spacing: 5px;
        }

        td {
            border-style: solid;
            border-width: 1px;
            text-align: center;
            vertical-align: top;
            height: 50px;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

 

Series Navigation<< HTML Table: Table cell padding and spacing