HTML Forum

**mushget** · 10-12-2010, 11:24 PM

im new to using tables and what im trying to do is have 1 large row with 1 large colomn under it on the left and 2 small rows on the right of it... any1 know how to do this? i honestly cant figure it out

**blue-dreamer** · 10-12-2010, 11:43 PM

Here's a basic 3 column table structure...

Code:

<table summary="summary of table contents">
<tr>
<th class="col1">Column 1 title</th>
<th class="col2">Column 2 title</th>
<th class="col3">Column 3 title</th>
</tr>
<tr>
<td>Column 1 content</td>
<td>Column 2 content</td>
<td>Column 3 content</td>
</tr>
</table>

Use the CSS classes to define your widths:

Code:

.col1 { width: 400px; }
.col2 { width: 100px; }
.col3 { width: 100px; }

**mushget** · 10-13-2010, 03:29 AM

Thanks first ,I will have a try...

**chrishirst** · 10-17-2010, 04:49 PM

Quote:

Originally Posted by mushget

im new to using tables and what im trying to do is have 1 large row with 1 large colomn under it on the left and 2 small rows on the right of it... any1 know how to do this? i honestly cant figure it out

and what exactly is a "large row" or a "large column"?

**Kelpie** · 10-18-2010, 06:17 AM

From the question, it sounds like you might mean something like this?

If so, the code used to create this is

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style>
table {
    width: 600px;
    border-collapse: collapse;
}
#largeRow {
    background-color: #fcc;
}
#column {
    width: 400px;
    background-color: #cfc;
}
#smallRow1 {
    background-color: #ccf;
}
#smallRow2 {
    background-color: #ff9;
}
</style>
</head>

<body>
<table>
    <tr>
        <th colspan="2" id="largeRow">This is the large row</th>
    </tr>
    <tr>
        <td rowspan="2" id="column">This is the large column</td>
        <td id="smallRow1">This is the first small row</td>
    </tr>
    <tr>
        <td id="smallRow2">This is the second small row</td>
    </tr>
</table>
</body>
</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!