howard-tables2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Howard Colspan and Rowspan</title>
<style>
body {
        background-color:gray;
        font-variant:small-caps;
}
table {
        border:3px solid red;
        border-radius: 20px 0px 20px 0px;
        text-align:center;
        font-size:24px;
}
td,tr {
        border:3px solid pink;
        color:pink;
        height:100px;
        width:100px;
}
.btmrt {
        border-radius:0px 0px 15px 0px;
}
.tplft {
        border-radius:15px 0px 0px 0px;
}
caption,h1,h2 {
        color:pink;
}
#right {
        float:right;
}
table#2 {
        width:500px;
}
</style>
</head>
<body>
<h1>Colspan and Rowspan Examples</h1>
<h2>Colspan Example</h2>
<table>
<caption>Colspan goes in the "open" part of the td tag.</caption>
    <tr>
        <td colspan="2" class="tplft">2 Columns</td>
    </tr>
    <tr>
        <td>1 Column</td>
        <td class="btmrt">1 Column</td>
    </tr>
</table>
<h2>Rowspan Example</h2>
<table>
<caption>Rowspan goes in the "open" part of the td tag.</caption>
    <tr>
        <td rowspan="2" class="tplft">2 Rows</td>
        <td>1 Row</td>
    </tr>
    <tr>
        <td class="btmrt">1 Row</td>
    </tr>
</table>
<br />
<table id="2">
    <caption>This is a Caption</caption>
    <tr>
        <th colspan="2">Heading - Bold and Center</th>
    </tr>
    <!-- Row 1 -->
    <tr>
        <td>Row One Column One</td>
        <td>Row One Column Two</td>
    </tr>
    <!-- Row 2 -->
    <tr>
        <td>Row Two Column One</td>
        <td>Row Two Column Two</td>
    </tr>
    <!-- Row 3 -->
    <tr>
        <td rowspan="3">Row Three Column One</td>
        <td>Row Three Column Two</td>
    </tr>
    <tr>
        <td>Row Five Column Two</td>
    </tr>
    <tr>
        <td class="btmrt">Row Six Column Two</td>
    </tr>
</table>
</body>
</html>