SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    information in tables

    Hello all,
    I have a huge problem and have no clue what I should do.

    I'm rewriting a site, which is all in tables. It's a site where people can search for vacation homes. Each home has its own group of information pages, which include a calendar, which I decided to keep in a table (the calendar, not the page). The current calendars are simply tables with numbers in them, background colours assigned to convey information and a colour legend underneath (as well as a link to a page which described the rates more fully).

    Help! There's zero information in these tables in the source! Looking at it, it seems every single datum has to convey at least 5 pieces of information: the day, the month, the year, the price-season, and the availability. It's looking like that means I have to make up a unique id for every single day-- 365 unique id's on every page of just one house, meaning each house has it's own unique set of 365... millions and millions of ids. And even with id's, I can't figure out how to get this other information into these dates. With "headers" I can likely get the day-names associated via normal table patterns, but so far I've only got a caption naming the month, and the visual aspect of the calendar must remain (they only display numbers with the background colour). Price-season is only shown if the date is available, so there's a default-- one piece of information can set the other to "no".

    I don't think I can do this with "headers" and "scope"... yeah, I'm not too good at tables anyway but this was my start until I figured out what to do for non-visual browsers (and searching... currently the clients can search by date availability but I dunno what script that is, and seems to not directly affect the tables which seem to merely be displays):
    Code:
    	<table class="maand" summary="Aantal beschikbare dagen en seizoenen voor dit huis in Maart">
    	  <caption>Maart 2008</caption>
    	  <thead title="dagen">
    	    <tr>
    	      <th abbr="zaterdag">za</th>
    	      <th abbr="zondag">zo</th>
    	      <th abbr="mandag">ma</th>
    	      <th abbr="dinsdag">di</th>
    	      <th abbr="woensdag">wo</th>
    	      <th abbr="donderdag">do</th>
    	      <th abbr="vrijdag">vr</th>
    	    </tr>
    	  </thead>
    	  <tbody>
    	    <tr>
    	      <td class="laag">1</td>
    	      <td class="bezig">2</td>
    	      <td class="bezig">3</td>
    	      <td class="bezig">4</td>
    	      <td class="bezig">5</td>
    	      <td class="bezig">6</td>
    	      <td class="bezig">7</td>
    	    </tr>
    	    <tr>
    	      <td class="bezig">8</td>
    	      <td class="bezig">9</td>
    	      <td class="laag">10</td>	
    	      <td class="laag">11</td>
    	      <td class="laag">12</td>
    	      <td class="laag">13</td>
    	      <td class="laag">14</td>
    	    </tr>
    	    <tr>
    	      <td class="laag">15</td>
    	      <td class="laag">16</td>
    	      <td class="laag">17</td>
    	      <td class="laag">18</td>
    	      <td class="laag">19</td>
    	      <td class="laag">20</td>
    	      <td class="laag">21</td>
    	    </tr>
    	    <tr>
    	      <td class="laag">22</td>
    	      <td class="laag">23</td>
    	      <td class="laag">24</td>
    	      <td class="laag">25</td>
    	      <td class="laag">26</td>
    	      <td class="laag">27</td>
    	      <td class="laag">28</td>
    	    </tr>
    	    <tr>
    	      <td class="laag">29</td>
    	      <td class="laag">30</td>
    	      <td class="laag">30</td>
    	    </tr>
    	  </tbody>
    	</table>
    So I added summary (which I do not want to display for visual browsers), caption to hold the month (which I do want displayed, inside the month table), thead, th with abbr, tbody... the classes are placeholders to deal with the background colours, but I'm really not worried about background colours. They should be an extra, to make the information easier for visual users to pick out info quickly.

    I also don't want all 5 pieces of information read when someone with a screen reader tabs or keys through every single date unless they request that information.... same goes for text browsers which also won't display the colours. Chances are, if you start at March and key through the dates, you know that they are March dates. But it needs to be available if they ask for it. I have no clue how that actually works with stuff like axis and headers, but as I have no row-headers, I'm not using axis either. I also don't want to make every datum a link to a page with the info... who wants to have to keep clicking back and forth to see a bit of information?

    What do I do???

    A related question, currently homeowners and real estate agents upload home info via an XML document, which our scripts use to fill the fields displaying home information. As I plan to make this from a table to a definition list, I'm wondering... would microformats have a future here? Currently, the partner companies and homeowners have to use certain tags so that our scripts know what information is what. If a new company comes from say, Sweden (we're in talks), their tags will be in Swedish and not Dutch or English... every new partner means a rewrite of the scripts. A standard information-carrying format seems to be the way, but I dunno much about them. Mostly it seems bloggers use them... and the required tags for iCalendar includes "events" which, well, we have no events, only data.

    But this is just a side thought, the important thing is the tables.

    Thanks for any help/thoughts,
    -Poes

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    There are a few options. One is to make each date a link, which points to availability information for that date. Alternately, you can add a list inside each table cell, with the ISO 8601-date as an ID for each cell for each identification. This can be used to dynamically generate the CSS for the appropriate cells. You can also add a CLASS for each DT or DD.

    Code html4strict:
    <table class="calendar" summary="Number of available days for the house in March">
      <caption>2008-03</caption>
      <thead>
        <tr>
          <th abbr="Saturday" scope="col">Sat</th>
          <th abbr="Sunday" scope="col">Sun</th>
          <th abbr="Monday" scope="col">Mon</th>
          <th abbr="Tuesday" scope="col">Tue</th>
          <th abbr="Wednesday" scope="col">Wed</th>
          <th abbr="Thursday" scope="col">Thu</th>
          <th abbr="Friday" scope="col">Fri</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="20080301">
            <dl>
              <dt>Day</dt>
                <dd>1</dd>
              <dt>Availability</dt>
                <dd>Available</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
          <td id="20080302">
            <dl>
              <dt>Day</dt>
                <dd>2</dd>
              <dt>Availability</dt>
                <dd>Busy</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
          <td id="20080303">
            <dl>
              <dt>Day</dt>
                <dd>3</dd>
              <dt>Availability</dt>
                <dd>Busy</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
          <td id="20080304">
            <dl>
              <dt>Day</dt>
                <dd>4</dd>
              <dt>Availability</dt>
                <dd>Busy</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
          <td id="20080305">
            <dl>
              <dt>Day</dt>
                <dd>5</dd>
              <dt>Availability</dt>
                <dd>Busy</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
          <td id="20080306">
            <dl>
              <dt>Day</dt>
                <dd>6</dd>
              <dt>Availability</dt>
                <dd>Busy</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
          <td id="20080307">
            <dl>
              <dt>Day</dt>
                <dd>7</dd>
              <dt>Availability</dt>
                <dd>Busy</dd>
              <dt>Price</dt>
                <dd><abbr="Euro">EUR</abbr> 150</dd>
            </dl>
          </td>
        </tr> 
      </tbody>
    </table>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the reply!

    I thought of links, but it seemed like page-bloat and I still wonder how difficult that would be for visitors to see-- esp since houses are generally busy in week or 2-week blocks (so the visual visitor can easily see that from Tues tot following wed the house is busy) and wouldn't that be horribly difficult to ascertain if you had to click on every day?

    The definition list is appealling because of the ability to dynamically load characteristics, which is nice as they change by the hour... but how would that look?

    I'm kinda forced to work with this:
    http://stommepoes.nl/Homeselling/sec.../calendars.gif which is part of a sidebar consisting of the current month at top (not seen), a short colour legend, then some other adjacent months, and a link which shows you every month of the year for this house, plus another colour legend with prices (again, I have to figure out how to make this legend mean something to those who can't see the colours) ...

    And I dunno how I'm going to fit these now much larger calendars on the page. Do you recommend CSS to move the definition lists a gazillion pixels left or so, so the text appears on Lynx and screen readers...? Or, what can I do for the monochromed screens, the greyscale cell phones and the colour blind?

    Thanks again,
    poes

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Another question has popped up. I'm trying to use "headers" to link the date with the day. So I start with this:
    Code:
    	    <tr>
    	      <th id="za0308" abbr="zaterdag" scope="col">za</th>
    	      <th id="zo0308" abbr="zondag" scope="col">zo</th>
    	      <th id="ma0308" abbr="mandag" scope="col">ma</th>
    	      <th id="di0308" abbr="dinsdag" scope="col">di</th>
    	      <th id="wo0308" abbr="woensdag" scope="col">wo</th>
    	      <th id="do0308" abbr="donderdag" scope="col">do</th>
    	      <th id="vr0308" abbr="vrijdag" scope="col">vr</th>
    	    </tr>
    I need the month-year numbers in there cause of the unique id-per-page thing... several calendars on the same page.

    Those days which sit on the calendar but actually belong to the adjascent months... I'm putting empty td's in there, I think I should, but what should I do with headers? No headers, or keep them as they are sitting within the table for that month?
    Code:
    	    <tr>
    	      <td headers="za0308" class="laag">29</td>
    	      <td headers="zo0308" class="laag">30</td>
    	      <td headers="ma0308" class="laag">31</td>
    	      <td></td>
    	      <td></td>
    	      <td></td>
    	      <td></td>
    	    </tr>
    	  </tbody>
    As this is March, the last 4 days then belong to April; however their placeholders are in the March table. I've also thought of trying to have two headers, one repreenting the month-year, and the other the days, but the days must have different id's from month to month since the months are often on the same page. But if I could do that, I could continue to give them headers to say that the data fall under such-and-such days, but are not part of the month. Then again, I don't know how useful that is. I always use the space myself in representing how much of a week is made up of which months but that might only be me.

    For simplicity I'm thinking on no headers at all. Thoughts?

  5. #5
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Another suggestion, including CSS. This is just off the top of my head, so there may be some issues I haven't thought of.

    Code html4strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     
    <html>
      <head>
        <title>Calendar</title>
     
        <style type="text/css" media="screen">
          .calendar {
           border-collapse: collapse;
           font-family: verdana;
           font-size: 0.8em;
          }
     
          .calendar tbody dd {
           margin: 0;
           padding: 0;
           width: 3em;
          }
     
          .calendar dd.availability {
           position: absolute;
           left: -1000em;
          }
     
          .calendar dd.day, tfoot li.occupied {
           background-color: #000000;
           color: #ffffff;
          }
     
          .calendar tbody dt {
           position: absolute;
           left: -1000em;
          }
     
          .calendar td, .calendar th {
           border: 1px solid #000000;
           margin: 0;
           padding: 0;
          }
     
          .calendar ul, calendar li {
           margin: 0;
           padding: 0;
          }
     
          #day20080301 dd.day, tfoot li.price1 {
           background-color: #eeeeee;
           color: #000000;
           font-weight: bold;
          }
     
          #day20080308 dd.day, #day20080309 dd.day, #day20080310 dd.day, #day20080311 dd.day, #day20080312 dd.day, tfoot li.price2 {
           background-color: #bbbbbb;
           color: #000000;
           font-weight: bold;
          }
        </style>
      </head>
      <body>
        <table class="calendar" summary="Number of available days for the house in March">
          <caption>2008-03</caption>
          <thead>
            <tr>
              <th abbr="Saturday" scope="col">Sat</th>
              <th abbr="Sunday" scope="col">Sun</th>
              <th abbr="Monday" scope="col">Mon</th>
              <th abbr="Tuesday" scope="col">Tue</th>
              <th abbr="Wednesday" scope="col">Wed</th>
              <th abbr="Thursday" scope="col">Thu</th>
              <th abbr="Friday" scope="col">Fri</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <th colspan="7" scope="row">Legend</th>
            </tr>
            <tr>
              <td colspan="7">
                <ul>
                  <li class="occupied">Occupied</li>
                  <li class="price1">Price group 1</li>
                  <li class="price2">Price group 2</li>
                </ul>
              </td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td id="day20080301">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">1</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Available</dd>
                </dl>
              </td>
              <td id="day20080302">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">2</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080303">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">3</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080304">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">4</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080305">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">5</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080306">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">6</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080307">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">7</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
            </tr>
            <tr>
              <td id="day20080308">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">8</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Available</dd>
                </dl>
              </td>
              <td id="day20080309">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">9</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080310">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">10</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080311">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">11</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080312">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">12</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080313">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">13</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
              <td id="day20080314">
                <dl>
                  <dt class="day">Day</dt>
                    <dd class="day">14</dd>
                  <dt class="availability">Availability</dt>
                    <dd class="availability">Occupied</dd>
                </dl>
              </td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Thanks.
    This gives me some ideas... I've only got to build the current pages, one of which has three months and the other which has all, just for one house, and then my colleague can script all that. I like the idea of using the dd to set the colour for those with colour, and moving everything else to the left.

    Currently there's a single legend on the page (it's not showing on the gif I posted above as they are below)... it seems like maybe a good idea to have a little legend on each month instead of once on the page.

    I might add some CSS tooltips on the days showing price... even on a monochrome screen, red is damn dark compared to the price colours, but you can't tell one price range from another, so maybe a tooltip would do the job there.

    Thanks a lot for looking into this. Cheers,
    -Poes

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)

    Update

    Update: I ended up not going with definition lists because I couldn't get them to appear on :hover or :focus (for colourblind people.. I have too many different colours here).

    Code:
    <table class="maand" summary="Aantal beschikbare dagen en seizoenen voor dit huis in maart">
      <thead title="dagen">
        <tr>
          <th class="titel" colspan="7" scope="colgroup">Maart 2008</th>
        </tr>
        <tr>
          <th abbr="zaterdag" scope="col">za</th>
          <th abbr="zondag" scope="col">zo</th>
          <th abbr="mandag" scope="col">ma</th>
          <th abbr="dinsdag" scope="col">di</th>
          <th abbr="woensdag" scope="col">wo</th>
          <th abbr="donderdag" scope="col">do</th>
          <th abbr="vrijdag" scope="col">vr</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="d20080301" class="laag">
            <a href="d20080301">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>1</a>
          </td>
          <td id="d20080302" class="laag">
            <a href="d20080302">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>2</a>
          </td>
          <td id="d20080303" class="laag">
            <a href="d20080303">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>3</a>
          </td>
          <td id="d20080304" class="laag">
            <a href="d200803014">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>4</a>
          </td>
          <td id="d20080305" class="laag">
            <a href="d20080305">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>5</a>
          </td>
          <td id="d20080306" class="laag">
            <a href="d20080306">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>6</a>
          </td>
          <td id="d20080307" class="laag">
            <a href="d20080307">
    	  <span><em>Prijs Seizoen:</em> Laag<br />
    	  <em>Beschikbaarheid:</em> Beschikbaar<br /> <em class="dag">Dag:</em> </span>7</a>
          </td>
        </tr>
        <tr>
          <td id="d20080308" class="bezet">
            <a href="d20080308">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>8</a>
           </td>
          <td id="d20080309" class="bezet">
            <a href="d20080309">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>9</a>
          </td>
          <td id="d20080310" class="bezet">
            <a href="d20080310">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>10</a>
          </td>	
          <td id="d20080311" class="bezet">
            <a href="d20080311">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>11</a>
          </td>
          <td id="d20080312" class="bezet">
            <a href="d20080312">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>12</a>
          </td>
          <td id="d20080313" class="bezet">
            <a href="d20080313">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>13</a>
          </td>
          <td id="d20080314" class="bezet">
            <a href="d20080314">
    	  <span><em>Beschikbaarheid:</em> Bezet<br /> <em class="dag">Dag:</em> </span>14</a>
          </td>
        </tr>
    ...etc...
    </table>
    CSS
    Code:
    table.maand {
      width: 240px;
      position: relative;
      border: 1px solid #000;
      margin: 10px auto;
      z-index: 100; /*opera*/
    }
    	table.maand tr {
    	  height: 2em;
    	}
    	th, td {
    	  text-align: center;
    	  vertical-align: middle;
    	  color: #000;
    	}
    	table.maand th {
    	  font-size: 1.2em;
    	}
    	table.maand th.titel {
    	  font-size: 1.5em;
    	  text-decoration: underline;
    	  vertical-align: top;
      	  line-height: 1.5em;
    	  height: 2.5em;
    	}
    
    	table.maand tbody td {
    	  border: solid #e1eef4;
    	  border-width: 0 0 2px 2px;
    	  width: 25px;
    	}
    	table.maand tbody td a {
    	  text-decoration: none;
    	  color: #000;
    	  display: block;
    	  width: 25px;
    	  height: 25px;
    	  line-height: 25px;
    	}
    
    	td.lastminute {
    	  background-color: #81bfff;
    	}
    	td.laag, td.laag a {
    	  background-color: #9bda68;
    	}
    	td.midden, td.midden a {
    	  background-color: #fffe7a;
    	}
    	td.hoog, td.hoog a {
    	  background-color: #ffa405;
    	}
    	td.top, td.top a {
    	  background-color: #ff8080;
    	}
    	#sidebar td.bezet, #sidebar td.bezet a {
    	  background-color: #f00;
    	  color: #fff;
    	} 
    	table.maand td a span {
    	  position: absolute;
    	  left: -1000em;
    	  width: 200px;
    	  border: 1px solid #000;
    	  background-color: #fff;
    	  color: #000;
    	  line-height: 1.2em;
    	  padding: 5px 5px 0;
    	}
    	td a span em.dag {
    	  font-size: 1px;
    	  line-height: 1px;
    	  color: #fff;
    	}
    /*IE6*/
    table.maand td a:hover {
      visibility: visible;
    } 
    	  	  
    	table.maand td a:focus span, table.maand td a:hover span {
    	  left: -210px;
    	}
    
    table.legenda {
      margin: 10px auto;
      width: 240px;
      border: 1px solid #000;
    }
    	table.legenda tr {
    	  height: 2em;
    	}
    	table.legenda td {
    	  width: 20%;
    	  text-align: center;
    	  vertical-align: middle;
    	}
    I couldn't keep the style of the original calendars with caption so that went out and was replaced by a colgroup-spanning th. I got rid of headers when I realised that scope="col" was doing the same job and I only had one header for each td anyway. I needed the a to react to :hover... for some reason td's don't, and used the span to convey on top of colour, while all the text is available in Lynx or JAWS etc.

    I'm not sure if I'm covered all the way, but I think I am. Colour legend ended up in a seperate table instead of tfoot since it's repeated too much on a page with mutliple calendars, plus it doesn't say anything to non-visual visitors anyway.

    Anyway, just an update.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •