HTML table with fixed uneven rows

StackOverflow https://stackoverflow.com/questions/4259891

Question

I'm creating a page that allows the user to select a time slot from a schedule. I would prefer to do this with some sort of table layout (vs. using drop down/combo boxes). But I'm having trouble figuring out which path to take because the schedule is layed out like this. alt text

So M,W,F are the same and T,TR are the same layout. I was hoping to do this with some sort of table instead of pure graphic because I want to be able to update information displayed in the cells. Is there a method other than doing rowspans to get the uneven layout like the picture. Or should I take a completely different approach. All my javascript needs to know is what information(text) is displayed in the cell and which one is being clicked.

Was it helpful?

Solution

The code below is a TABLE solution using the ROWSPAN attribute. CSS is only relied on for setting row heights and column widths.

The big advantage to this approach is that any cells that expand vertically will cause the entire row to expand the same amount, so your columns and rows will never get misaligned.

If you instead try a to use more than one table, or a DIV/CSS-driven solution, you can use Javascript to realign things for you, but this can be quite difficult to implement correctly.

alt text

<html>
    <head>
        <style>
            table{border-collapse:collapse;border-spacing:0}
            td,th{border:1px solid #000}
            .m,.w,.f{width:104px}
            .t,.r{width:117px}
            .r5{height:12px}
            .r8{height:20px}
            .r9{height:27px}
            .r1,.r10,.r12,.r14{height:60px}
            .r2,.r7,.r11,.r13{height:18px}
            .r3,.r4,.r6{height:40px}            
        </style>
    </head>
    <body>
        <table cellspacing="0">
            <tr>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
            <tr class="r1">
                <td class="m"></td>
                <td class="t" rowspan="2"></td>
                <td class="w"></td>
                <td class="r" rowspan="2"></td>
                <td class="f"></td>
            </tr>
            <tr class="r2">
                <td class="m" rowspan="2"></td>
                <td class="w" rowspan="2"></td>
                <td class="f" rowspan="2"></td>
            </tr>
            <tr class="r3">
                <td class="t" rowspan="3"></td>
                <td class="r" rowspan="3"></td>
            </tr>
            <tr class="r4">
                <td class="m"></td>
                <td class="w"></td>
                <td class="f"></td>
            </tr>
            <tr class="r5">
                <td class="m" rowspan="2"></td>
                <td class="w" rowspan="2"></td>
                <td class="f" rowspan="2"></td>
            </tr>
            <tr class="r6">
                <td class="t" rowspan="2"></td>
                <td class="r" rowspan="2"></td>
            </tr>
            <tr class="r7">
                <td class="m" rowspan="3"></td>
                <td class="w" rowspan="3"></td>
                <td class="f" rowspan="3"></td>
            </tr>
            <tr class="r8">
                <td class="t"></td>
                <td class="r"></td>
            </tr>
            <tr class="r9">
                <td class="t" rowspan="3"></td>
                <td class="r" rowspan="3"></td>
            </tr>
            <tr class="r10">
                <td class="m"></td>
                <td class="w"></td>
                <td class="f"></td>
            </tr>
            <tr class="r11">
                <td class="m" rowspan="2"></td>
                <td class="w" rowspan="2"></td>
                <td class="f" rowspan="2"></td>
            </tr>
            <tr class="r12">
                <td class="t" rowspan="2"></td>
                <td class="r" rowspan="2"></td>
            </tr>
            <tr class="r13">
                <td class="m" rowspan="2"></td>
                <td class="w" rowspan="2"></td>
                <td class="f" rowspan="2"></td>
            </tr>
            <tr class="r14">
                <td class="t"></td>
                <td class="r"></td>
            </tr>
        </table>
    </body>
</html>

OTHER TIPS

Here is an example using CSS:

http://jsfiddle.net/byQHE/

It's not perfect, but it gives you an idea of what you can do.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top