Need advice with HTML table

Question

I would like to code an HTML table with messages like this:

alt text http://img717.yfrog.com/img717/4348/tableo.png

The table will contain messages that will spread over first N columns (N may change). Lets call these N columns, the message area. Each message is located on X contiguous cells in the message area. X may also change.

Each message has a name that contains words separated with underscores.

How would you recommend to code this table in Javascript/jQuery such that:

• It would be easy to define a message (start cell, end cell, color, name)
• The name will break only after underscores (rather than in the middle of the word)

Answer 1

Number the cells linearly, convert to row/column, set background and borders of each cell within range... not too difficult.

The tricky bit is inserting the text over the top by having a cell's content overflow from the cell, given that IE's table overflow is bugged to bits.

Here's what I've got which seems to work... it contains hacks for IE7, but I haven't tested it on IE6 so who knows what'll happen.

<style type="text/css">
    #t { table-layout: fixed; width: 50%; border-collapse: collapse; }
    #t td { border: solid black 1px; height: 1.2em; overflow: visible; }
    #t .message { text-align: center; }

    /* these styles fix ie bugs */
    #t .message { position: relative; }
    #t .message div { position: absolute; top: 0; left: 0; width: 100%; }
</style>

<table id="t">
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<script type="text/javascript">
    var t= new MessageTable(document.getElementById('t'), 3);
    t.addMessage('SHORT_MESSAGE', 4, 16, 'yellow');
    t.addMessage('VERY_VERY_LONG_MESSAGE', 20, 14, 'cyan');

    function MessageTable(element, width) {
        return {addMessage: function(text, c, n, color) {
            // add zero-width spaces for breaking
            text= text.replace(/_/g, '_\u200B');

            // set background and borders
            for (var i= c; i<c+n; i++) {
                var x= i%width, y= Math.floor(i/width);
                var style= element.rows[y].cells[x].style;
                style.backgroundColor= color;
                style.borderLeftStyle= (i===c || x===0)? 'solid' : 'none';
                style.borderRightStyle= (i===c+n-1 || x===width-1)? 'solid' : 'none';
                style.borderTopStyle= i-c<width? 'solid' : 'none';
                style.borderBottomStyle= c+n-i<width? 'solid' : 'none';
            }

            // add message to overflowing cell in first full row
            // The do-nothing inner div is required for IE (again. bah)
            var message= document.createElement('div');
            var inner= document.createElement('div');
            message.className= 'message';
            message.style.width= width+'00%';
            message.appendChild(inner);
            inner.appendChild(document.createTextNode(text));
            element.rows[Math.ceil(c/width)].cells[0].appendChild(message);
        }};
    }
</script>