Chapter 8 and 9

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

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.

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

Minimal Table Structure

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>

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>

Try to recreate this:

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

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

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>

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>

Try to recreate these:

Space in and between cells

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

<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>

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

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

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

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

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

Generate code

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

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

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

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

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

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

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

Password

Content specific inputs

Datalists

Buttons

Radio buttons

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>

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)

Multiple section options

Menu Grouping

File Select (Browse)

HTML 5 <input type=“color”… http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_color

HTML 5 Date and Time http://www.w3schools.com/html/html5_form_input_types.asp