1. Chapter 8 and 9

2. Overview How tables are used Basic table structure
Importance of headers
Spanning rows and columns
Cell padding and spacing
Accessibility

3. How are tables used When you need to add tabular material
data arranged into rows and columns
May be used to organize calendars, schedules, stats, or other types of info
Back in the old days, tables were used to make multi-columned layouts on webpages, but no more.

4. Problems with tables Large tables difficult to view on mobile devices
Need to consider logical layout to accommodate users who may be hearing the data read aloud
Example of screenreader

5. Minimal Table Structure

6. Code to generate the table
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
<td>Chicken noodle soup</td>
<td>120</td>
<td>2</td>
<td>Caesar salad</td>
<td>400</td>
<td>26</td>
</table>

7. Can you draw this table?
<table> <tr> <td>Sufjan Stevens</td> <td>Illinoise</td> <td>Asthmatic Kitty Records</td> </tr> <td>The Shins</td> <td>Oh Inverted World</td> <td>Sub-pop Records</td> </table>

8. Try to recreate this:

9. Table Headers
Text marked up as headers <th> is displayed differently from other cells in the table
Exactly how they display is dependent on the browser
Headers are important – provide information or context about cells in row or column
Headers are a key tool for making table content accessible
Don’t try to fake headers by formatting a row of td elements differently from the rest!!
Also, don’t avoid using th elements because of their default rendering (bold and centered).
Mark headers semantically and change presentation with style rule

10. Spanning Cells Stretching of a cell to cover several rows or columns
Allows you to create complex table structures
Makes markup a little more difficult
Use colspan or rowspan attributes

11. Column span Used as an attribute in the td or th elements
Stretches a cell to the right to span over the subsequent columns
<table>
<tr>
<th colspan=“2">Fat</th>
</tr>
<td>Saturated Fat (g)</td>
<td>Unsaturated Fat (g)</td>
</table>

12. Row span Used as an attribute in the td or th elements
Stretches a cell downward over several rows
<table>
<tr>
<th rowspan="3">Serving Size</th>
<td>Small (8oz.)</td>
</tr>
<td>Medium (16oz.)</td>
<td>Large (24oz.)</td>
</table>

13. Try to recreate these:

14. Space in and between cells

15. Advanced Table Elements
More elements and attributes that offer more complex semantic descriptions and improve accessibility
Row group elements – describe rows or groups of rows using thead, tfoot, tbody
May also be used to apply styles to various regions of table
Column group elements (col or colgroup)– used to identify columns
add semantic context to information
doesn’t appear on page, just describes columns before table data begins

16. <table>
<caption>Nutritional Information (Calorie and Fat Content)</caption>
<col span="1" class="itemname">
<colgroup id="data">
<col span="1" class="calories">
<col span="1" class="fat">
</colgroup>
<thead>
<tr>
<th scope="col">Menu item</th>
<th scope="col">Calories</th>
<th scope="column">Fat (g)</th>
</tr>
</thead>
<tbody>
<td>Chicken noodle soup</td>
<td>120</td>
<td>2</td>
<td>Caesar salad</td>
<td>400</td>
<td>26</td>
</tbody>
</table>

17. Accessibility Need to consider non-sighted users
Tabular data is challenging, but there are measures you can take to improve the experience and make content more understandable
Describing table content
Connecting cells and headers

18. Describing Table Content
Use caption element to give table title or brief description of contents
caption element must be first thing within the table element

19. Caption Example <table>
<caption>Nutritional Information</caption>
<tr>
<th>Menu item</th>
<th>Calories</th>
<th>Fat (g)</th>
</tr>
…table continues…
</table>

20. Connecting cells and headers
Sometimes it’s difficult to know which header applies to which cells
may be at the left or right edge of a row rather than top of column
scope attribute associates a table header with the row, column or group of rows
headers attribute used in the td element to explicitly tie it to a header’s id value
not going into detail on this one

21. Making pretty tables Various attributes and styles you can set
border – sets border width in pixels
cellpadding – sets space inside the cell
cellspacing – sets space outside the cell
backgroundColor – used in style to set the background color of an element
color – used in style to set the color of text

22. Generate code

23. Chapter 9 Forms Overview
How Forms Work
Basic Structure
Element you can use
Some new HTML 5 things!

25. Basic Form
<form action="/mailinglist.php" method="post”> <fieldset> <legend>Join our list</legend> <label for="firstlast">Name:</label> <input type="text" name="username” id="firstlast”> <label for=" "> </label> <input type="text" name=" " id=" ”> <input type="submit" value="Submit”> </fieldset> </form>

26. Server-side Scripting Languages
PHP (.php) open source scripting language that comes with the Apache web server.
Microsoft’s ASP.NET (Active Server Pages) (.asp) comes with Internet Information Server (IIS).
Ruby on Rails: programming language that is used with the Rails platform. Many popular web applications are built with it.
JavaServer Pages (.jsp) is a Java-based technology similar to ASP.
Python is another popular scripting language

27. The method attribute method=“get” Passes form data via the URL

28. The method attribute method=“post”
Passes form data “inside” the http request
Only the server can see the data
Good for secure data
Good for sending a lot of data such as long text entry or file

29. The name attribute
<textarea name="comment" rows="4" cols="45" placeholder="Leave us a comment."></textarea>
When a user enters a comment in the field (“This is the best band ever!”), it would be passed to the server as a name/value pair like this: comment=This%20is%20the%20best%20band%20ever%21

30. Text field vs. Text area Fields are single line
<input type=“text” … >
Areas can be multiple lines
<textarea … > …</textarea>
rows specifies height
cols specifies width

31. Password

32. Content specific inputs

33. Datalists

34. Buttons

35. Radio buttons

36. Pull-down or Drop-down menus
Uses two HTML tags
<select>
<option>
<option>Volvo</option>
<option>Saab</option>
<option>Opel</option>
<option>Audi</option>
</select>

37. Multiple section options
The size attribute changes the drop-down to a scrollable menu
The multiple attribute lets you select more than one option (hold the SHIFT or CTRL key)

38. Multiple section options

39. Menu Grouping

40. File Select (Browse)

41. HTML 5 <input type=“color”…

42. HTML 5
Date and Time