creating a data table n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Creating a Data Table PowerPoint Presentation
Download Presentation
Creating a Data Table

Loading in 2 Seconds...

play fullscreen
1 / 13

Creating a Data Table - PowerPoint PPT Presentation


  • 67 Views
  • Uploaded on

Creating a Data Table. Web Design – Section 3-8. Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials. Objectives. The Student will: Understand the HMTL tags associated with data tables. Be able create a simple data table .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Creating a Data Table' - dorit


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
creating a data table

Creating a Data Table

Web Design –

Section 3-8

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials

objectives
Objectives
  • The Student will:
    • Understand the HMTL tags associated with data tables.
    • Be able create a simple data table
hmtl tags for tables
HMTL Tags for Tables
  • HTML tables begin and end with table elements: <table></table>.
    • The opening table element should include a summary attribute, which is read by screen readers in order to give blind users an overview of what the table contains and how it's organized. Being informed of this information up front helps blind users to more easily navigate the table and understand what they're hearing. Example: <table summary="Your brief table description here">
hmtl tags for tables1
HMTL Tags for Tables
  • A table's caption (brief descriptive text, usually displayed above the table) begins and ends with caption elements: <caption>
  • Each row in a table begins and ends with table row (tr) elements: <tr></tr>
hmtl tags for tables2
HMTL Tags for Tables
  • Each cell in the table begins and ends with either table header (th) elements or table data (td) elements, depending on what type of information the cell contains.
    • If a cell contains headers, it begins and ends with th elements: <th></th>
    • If a cell contains data (not headers), it begins and ends with td elements: <td></td>
hmtl tags for tables3
HMTL Tags for Tables
  • Table header elements (th) should also include a scope attribute, which is either scope="row" or scope="col". This instructs screen readers as to which headers apply to which cells. Screen readers read tables row by row from left to right, and without this extra markup blind users would have a difficult time if the header applies to the column
html table example
HTML Table Example
  • Let’s look at the HMTL to create this table
html table example1
HTML Table Example

<table summary="Two school lunch menu choices in two rows, with columns corresponding to school days Monday through Friday">

<caption>School Lunch Menu</caption>

html table example2
HTML Table Example

<tr>

<td> </td>

<th scope="col">Monday</th>

<th scope="col">Tuesday</th>

<th scope="col">Wednesday</th>

<th scope="col">Thursday</th>

<th scope="col">Friday</th>

</tr>

html table example3
HTML Table Example

<tr>

<th scope="row">Carnivores</th>

<td>Sausage pizza</td>

<td>Corn dogs</td>

<td>Sloppy Joe</td>

<td>Beef taco</td>

<td>Chicken and dumplings</td>

</tr>

html table example4
HTML Table Example

<tr>

<th scope="row">Herbivores</th>

<td>Veggie pizza</td>

<td>Veggie dogs</td>

<td>BBQ tempeh</td>

<td>Bean burrito</td>

<td>Tofu teriyaki</td>

</tr>

</table>

summary
Summary
  • Tables were introduced to the web with the original purpose of displaying data in rows and columns.
  • Build tables using the table HTML tags
  • Tables are built row by row.

Rest of Today

  • Follow the instructions to create a table. This does not go into your index.htm file. This goes in your accesibility.html page.
final result
Final Result
  • Final table doesn’t look great but we will come back to it later and clean it up.