Teil 4 – Accessibility (Zugänglichkeit)

Erstellen einer einfachen, zugänglichen Tabelle

Unzugängliche Auszeichnung

In diesem Beispiel ist die Tabelle noch ohne Funktionen, die die Zugänglichkeit verbessern.

<h5>
   Pricing for screws, Flat nails and Dyna-bolts
</h5>
<table border="1" cellspacing="0" cellpadding="5">
   <tr>
      <td><strong>Item</strong></td>
      <td><strong>Threaded screws</strong></td>
      <td><strong>Flat nails</strong></td>
      <td><strong>Dyna-bolts</strong></td>
      <td><strong>Spring washers</strong></td>
   </tr>
   <tr>
      <td><strong>Kilo</strong></td>
      <td>$2.50</td>
      <td>$3.50</td>
      <td>$4.50</td>
      <td>$2.50</td>
   </tr>
   <tr>
      <td><strong>Pound</strong></td>
      <td>$2.00</td>
      <td>$3.00</td>
      <td>$4.00</td>
      <td>$2.00</td>
   </tr>
</table>

Schritt 1 – Eine Zusammenfassung hinzufügen (summary)

<h5>
   Pricing for screws, Flat nails and Dyna-bolts
</h5>
<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos and pounds" border="1" cellspacing="0" cellpadding="5">
   <tr>
      <td><strong>Item</strong></td>
      <td><strong>Threaded screws</strong></td>
      <td><strong>Flat nails</strong></td>
      <td><strong>Dyna-bolts</strong></td>
      <td><strong>Spring washers</strong></td>
   </tr>
   <tr>
      <td><strong>Kilo</strong></td>
      <td>$2.50</td>
      <td>$3.50</td>
      <td>$4.50</td>
      <td>$2.50</td>
   </tr>
   <tr>
      <td><strong>Pound</strong></td>
      <td>$2.00</td>
      <td>$3.00</td>
      <td>$4.00</td>
      <td>$2.00</td>
   </tr>
</table>

Step 2 – Hinzfügen einer Legende (caption)

<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos and pounds" border="1" cellspacing="0" cellpadding="5">
   <caption>Pricing for screws, Flat nails and Dyna-bolts</caption>
   <tr>
      <td><strong>Item</strong></td>
      <td><strong>Threaded screws</strong></td>
      <td><strong>Flat nails</strong></td>
      <td><strong>Dyna-bolts</strong></td>
      <td><strong>Spring washers</strong></td>
   </tr>
   <tr>
      <td><strong>Kilo</strong></td>
      <td>$2.50</td>
      <td>$3.50</td>
      <td>$4.50</td>
      <td>$2.50</td>
   </tr>
   <tr>
      <td><strong>Pound</strong></td>
      <td>$2.00</td>
      <td>$3.00</td>
      <td>$4.00</td>
      <td>$2.00</td>
   </tr>
</table>

Schritt 3 – Hinzufügen von thead und tbody

<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos and pounds" border="1" cellspacing="0" cellpadding="5">
   <caption>Pricing for screws, Flat nails and Dyna-bolts</caption>
   <thead>
      <tr>
         <td><strong>Item</strong></td>
         <td><strong>Threaded screws</strong></td>
         <td><strong>Flat nails</strong></td>
         <td><strong>Dyna-bolts</strong></td>
         <td><strong>Spring washers</strong></td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><strong>Kilo</strong></td>
         <td>$2.50</td>
         <td>$3.50</td>
         <td>$4.50</td>
         <td>$2.50</td>
      </tr>
      <tr>
         <td><strong>Pound</strong></td>
         <td>$2.00</td>
         <td>$3.00</td>
         <td>$4.00</td>
         <td>$2.00</td>
      </tr>
   </tbody>
</table>

Schritt 4 – Hinzufügen von th

<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos and pounds" border="1" cellspacing="0" cellpadding="5">
   <caption>Pricing for screws, Flat nails and Dyna-bolts</caption>
   <thead>
      <tr>
         <th>Item</th>
         <th>Threaded screws</th>
         <th>Flat nails</th>
         <th>Dyna-bolts</th>
         <th>Spring washers</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Kilo</th>
         <td>$2.50</td>
         <td>$3.50</td>
         <td>$4.50</td>
         <td>$2.50</td>
      </tr>
      <tr>
         <th>Pound</th>
         <td>$2.00</td>
         <td>$3.00</td>
         <td>$4.00</td>
         <td>$2.00</td>
      </tr>
   </tbody>
</table>

Schritt 5 – Hinzufügen von id and headers

<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos and pounds" border="1" cellspacing="0" cellpadding="5">
   <caption>Pricing for screws, Flat nails and Dyna-bolts</caption>
   <thead>
      <tr>
         <th>Item</th>
         <th id="screws">Threaded screws</th>
         <th id="nails">Flat nails</th>
         <th id="bolts">Dyna-bolts</th>
         <th id="washers">Spring washers</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="kilo">Kilo</th>
            <td headers="screws kilo">$2.50</td>
            <td headers="nails kilo">$3.50</td>
            <td headers="bolts kilo">$4.50</td>
            <td headers="washers kilo">$2.50</td>
        </tr>
        <tr>
            <th id="pound">Pound</th>
            <td headers="screws pound">$2.00</td>
            <td headers="nails pound">$3.00</td>
            <td headers="bolts pound">$4.00</td>
            <td headers="washers pound">$2.00</td>
        </tr>
    </tbody>
</table>

Schritt 6 – Hinzufügen von abbr

<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos and pounds" border="1" cellspacing="0" cellpadding="5">
   <caption>Pricing for screws, Flat nails and Dyna-bolts</caption>
   <thead>
      <tr>
         <th>Item</th>
         <th id="screws" abbr="screws">Threaded screws</th>
         <th id="nails" abbr="nails">Flat nails</th>
         <th id="bolts" abbr="bolts">Dyna-bolts</th>
         <th id="washers" abbr="washers">Spring washers</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="kilo">Kilo</th>
            <td headers="screws kilo">$2.50</td>
            <td headers="nails kilo">$3.50</td>
            <td headers="bolts kilo">$4.50</td>
            <td headers="washers kilo">$2.50</td>
        </tr>
        <tr>
            <th id="pound">Pound</th>
            <td headers="screws pound">$2.00</td>
            <td headers="nails pound">$3.00</td>
            <td headers="bolts pound">$4.00</td>
            <td headers="washers pound">$2.00</td>
        </tr>
    </tbody>
</table>

Copyright © Max Design 2005
Deutsche Übersetzung von Stefan Walter