HTML Table: Setting table height

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

Height could also be set for HTML table.  This is done in the table tag. The example below set the height of the table to have 100 pixels.

<table height='100px'>
Setting Table Height
<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='100%' height='100px'>
    <tr>
        <td>ID</td>
        <td>artiste</td>
        <td>album</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>
Setting Table Height Output

HTML Table: Specifying the width of a column

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

Say we have a table where the first column is a running number and in the example below, an ID, which is a running number.

We would have known that we need a smaller column for this ID.

So the ID column is set at 10%,  the Artiste and Album at 45%.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='100%'>
    <tr>
        <th width='10%'>ID</th>
        <th width='45%'>Artiste</th>
        <th width='45%'>Album</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
</table>

</body>
</html>


Width of a column

HTML Table: Spanning or merging table cells

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

In HTML, as in using Excel spreadsheet, you can span or merge two or more adjacent cells so that one cell spans multiple rows and/or columns.

This technique is useful for centering text across several columns.

To merge a cell into adjacent cells to its right, use the colspan attribute and specify the number of columns to be spanned.

<td colspan='2'>

To merge a cell into adjacent cells below it, use the rowspan attribute and specify the number of rows to be spanned.

<td rowspan='2'>

Here a simple example on using the colspan.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='80%'>
    <tr>
        <th>ID</th>
        <th colspan='2'>Artiste</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>David Bowie</td>
    </tr>
</table>

</body>
</html>


Merging Table Cells

HTML Table: An example on using rowspan

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

Row span allows a row to span over multiple columns.

To implement rowspan:

<td rowspan='2'>

Notice there are only 2 <td> in the last row.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='80%'>
    <tr>
        <th>Country</th>
        <th>Artiste</th>
        <th>Album</th>
    </tr>
    <tr>
        <td rowspan='2'>British</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
    </tr>
    <tr>
        <td>Oasis</td>
        <td>Nevermind</td>
    </tr>
</table>

</body>
</html>

We can align the first column using align=’center’.

<td rowspan='2' align='center'>British</td>

HTML Table: Inserting an image to a row spanning column

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

In the old days, we have always used table to layout a page.

We can create a row spanning column and insert an image there.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-HTML Table</title>
</head>
<body>

<table border='1' width='80%'>
    <tr>
        <th>ID</th>
        <th>Artiste</th>
        <th>Album</th>
        <th rowspan="3"><img src='https://codecrawl.com/code/images/oasis.jpg' width='60' height='60'></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>


Image In A Table