SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Calendar Table in Lynx

    My tables look perfectly fine in visual browsers but eek, they don't look so tabular in lynx. So, a sample of what I see in lynx:
    Code:
    September 2003
       Sun
       
       Mon
       
       Tue
       
       Wed
       
       Thu
       
       Fri
       
       Sat
       
       
       
       1
       
       
       
       2
       
       1
       
       3
       
       1
       
       4
       
       1
       
       5
       
       1
       
       6
    Some sample code:
    Code:
    <table summary="September 2003" class="lj_calendar">
    <tr>
    <td colspan="7"><h3><a 
    href="http://www.livejournal.com/users/****/2003/09/">September 2003</a></h3>
    </td>
    </tr>
    <tr> 
    <td><p class="day">Sun</p></td>
    <td><p class="day">Mon</p></td>
    <td><p class="day">Tue</p></td>
    <td><p class="day">Wed</p></td>
    <td><p class="day">Thu</p></td>
    <td><p class="day">Fri</p></td>
    <td><p class="day">Sat</p></td>
    </tr>
    <tr>
    <td colspan="1">
    <p class="lj_day">&nbsp;</p>
    </td>
    <td>
    <p class="lj_day">1</p>
    <p class="lj_dayevent"></p>
    <p class="lj_daynoevent">&nbsp;</p>
    </td>
    <td>
    <p class="lj_day">2</p>
    <p class="lj_dayevent">
    <a href="http://www.livejournal.com/users/****/2003/09/02/">1</a>
    </p>
    <p class="lj_daynoevent"></p>
    </td>
    <td>
    <p class="lj_day">3</p>
    <p class="lj_dayevent">
    <a href="http://www.livejournal.com/users/****/2003/09/03/">1</a>
    </p>
    <p class="lj_daynoevent"></p>
    </td>
    <td>
    <p class="lj_day">4</p>
    <p class="lj_dayevent">
    <a href="http://www.livejournal.com/users/****/2003/09/04/">1</a>
    </p>
    <p class="lj_daynoevent"></p>
    </td><td>
    <p class="lj_day">5</p>
    <p class="lj_dayevent">
    <a href="http://www.livejournal.com/users/****/2003/09/05/">1</a>
    </p>
    <p class="lj_daynoevent"></p>
    </td>
    <td>
    <p class="lj_day">6</p>
    <p class="lj_dayevent"></p>
    <p class="lj_daynoevent">&nbsp;</p>
    </td>
    </tr>
     
    ...snip tedious rows
     
    <tr>
    <td>
    <p class="lj_day">28</p>
    <p class="lj_dayevent"></p>
    <p class="lj_daynoevent">&nbsp;</p>
    </td>
    <td>
    <p class="lj_day">29</p>
    <p class="lj_dayevent"></p>
    <p class="lj_daynoevent">&nbsp;</p>
    </td>
    <td>
    <p class="lj_day">30</p>
    <p class="lj_dayevent"></p>
    <p class="lj_daynoevent">&nbsp;</p>
    </td>
    <td colspan="4">
    <p class="lj_day">&nbsp;</p>
    </td>
    </tr>
    </table><hr />
    What am I doing wrong? :(

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You'll be fine. A calendar is a perfect semantic use for a table IMO. Remember that in Lynx presentation is less important than how the information is read. It still makes sense in that context.

    My only other suggestion would be to convert your "day" cells (the ones with "Sun", "Mon", etc. in them) from <td> tags to <th> tags, since they're table headers.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh okay. I was just freaking because I've never seen a calendar displayed so... linear.

    And, if I'm gonna change the day cells from <td> to <th> shouldnt' the Month Year cell (spanning 7 columns at the top) also be changed to <th>?

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by CRA
    Oh okay. I was just freaking because I've never seen a calendar displayed so... linear.

    And, if I'm gonna change the day cells from <td> to <th> shouldnt' the Month Year cell (spanning 7 columns at the top) also be changed to <th>?
    Actually, that should be a caption, not a header, if we're going full-out semantic:
    HTML Code:
    <table summary="july 2003 events">
    <caption>July 2003</caption>
    <tr>
      <th>Sunday</th>
      ..etc...
    </tr>
    You can then style the <caption> tag just like any other HTML tag using CSS. Typically it's left-aligned and sits just above the top border of the table

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Finally got a chance to fool around with this.

    Using table headers <th>Sun</th><th>Mon</th>... and taking out the paragraph tags, this puts the Day cells into a row. However, doing some googling, apparently, Lynx can't line up columns because Lynx displays table rows as paragraphs with only a space between columns. Line breaks are done with <br /> <p> and other block level tags inside the cells.

    Ah well, at least LiveJournal offers an alternate view using <dl><dt>2nd</dt><dd>Entry Title</dd></dl>, even if it is in their default (uncustomizable) style. *shrugs*

    But thanks Vinnie on the table semantics. I'm changing some code now and it's more readable this way. [img]images/smilies/smile.gif[/img]


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
  •