Using Tables

For websites, tables should be used to hold data and NOT used for design layout. Layout should be determined by a Cascading Style Sheet (css) with use of the <div> tag.

Best Practices for using Tables

Simple data tables can easily be read by screen readers if they incorporate the <th> tag and 카지노 게임 컬렉션scope카지노 게임 컬렉션 attribute to identify which cells are row and column headers. More complex tables can incorporate the <caption> and <summary> tags.

Consider the following table:

Contact Information
Person Number
John Doe (555) 555-5555

It is important to remember that screen reader read tables linearly. This table looks simple but is a little more complex when looking at the html code.

<table border="1" cellpadding="0" cellspacing="0" style="width: 400px;">
    <thead>
        <tr>
            <th colspan="2" scope="col">Contact Information</th>
        </tr>
        <tr>
            <th scope="col">Person</th>
            <th scope="col">Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:200px">John Doe</td>
            <td style="width:200px">(555) 555-5555</td>
        </tr>
    </tbody>
</table>

The table uses the <th> tags to identify the headers content. Most browsers will render any text in the <th> tag as bold and centred. We can improve this table카지노 게임 컬렉션s usability by adding a <caption> and <summary>. The <caption> tag is used to give a table a title. The <summary> is only read by screen readers and not displayed visually and they provide brief summaries of complex data and don카지노 게임 컬렉션t need to be used for every table.

Now we add a caption and summary to our example:

Person Contact
Contact Information
John Doe (555) 555-5555

The html code:

<table border="1" cellpadding="0" cellspacing="0" style="width: 500px;" summary="Table cells are read left to right, top to bottom.">

            <caption>Contact Information</caption>

<thead>
        <tr>
            <th scope="col">Person</th>
            <th scope="col">Contact</th>
        </tr>
    </thead>
   
    <tbody>
        <tr>
            <td style="width:200px">John Doe</td>
            <td style="width:200px">(555) 555-5555</td>
        </tr>
    </tbody>
</table>

Inserting a Table using WebPublish

In 카지노 게임 컬렉션Edit Draft카지노 게임 컬렉션 mode:

  1. Place your cursor where you wish to insert a table.
  2. The 카지노 게임 컬렉션Table카지노 게임 컬렉션 button from the menu screenshot of table button on menu in Web Publish
  3. This opens the 카지노 게임 컬렉션Table Properties카지노 게임 컬렉션 dialogue box where you can select which cells are headers, enter a caption, and a summary for complex tables.

screenshot of table properties dialogue box

Queen's Web Standards and Accessibility Development Guide (WSADG)

For your reference, sections of the WSADG used for this part of the tutorial are:

Designing for the Web