1-06: More HTML Elements

More HTML Elements

Colin Gourlay & Kevin Vanderbeken

Today:

Tables

Forms

Block Quotes

tables

the good tables

when tables are bad

the base table elements

<table border="1" cellpadding="1" cellspacing="0">    <tr>        <th>Month</th>        <th>Savings</th>    </tr>    <tr>        <td>January</td>        <td>$100</td>    </tr></table>

Month SavingsJanuary $100

<table> <th>

<tr> <td>

<td rowspan="3">

<td colspan="4">

column & row spans

<th colspan="4">

<td colspan="4">

colspan="4"

<td rowspan="3">

rowspan="3"

special table elements

<thead>, <tfooter> and <tbody>

<colgroup> and <col>

so how do we actually make tables look good?

<table id="hor-minimalist-b" summary="Employee Pay Sheet"> <thead>   <tr>     <th scope="col">Employee</th>      <th scope="col">Salary</th>      <th scope="col">Bonus</th>      <th scope="col">Supervisor</th>    </tr>  </thead>  <tbody>    <tr>       <td>Stephen C. Cox</td>       <td>$300</td>       <td>$50</td>       <td>Bob</td>     </tr>

<tr> <td>Josephin Tan</td>      <td>$150</td>      <td>-</td>      <td>Annie</td>    </tr>    <tr>      <td>Joyce Ming</td>      <td>$200</td>      <td>$35</td>      <td>Andy</td>    </tr>    <tr>      <td>James A. Pentel</td>      <td>$175</td>      <td>$25</td>      <td>Annie</td>    </tr>  </tbody></table>

markup

...

#hor-minimalist-b { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;  font-size: 12px;  background-color: #fff;  margin: 45px;  width: 480px;  border-collapse: collapse;  text-align: left;}

#hor-minimalist-b th {  font-size: 14px;  font-weight: normal;  color: #039;  padding: 10px 8px;  border-bottom: 2px solid #6678b1;}

#hor-minimalist-b td {  border-bottom: 1px solid #ccc;  color: #669;  padding: 6px 8px;}

#hor-minimalist-b tbody tr:hover td {  color: #009;}

style

the result

(Table design attributed to Smashing Magazine)

forms

<form action="form.html" method="post">   <fieldset>      <legend>Join our email list</legend>      <p>Get news about us sent to your email.</p>      <ol>         <li>            <label for="name">Name:</label>            <input type="text" name="name" id="name" />         </li>         <li>            <label for="name">Email:</label>            <input type="text" name="email" id="email" />         </li>        </ol>      <input type="submit" value="Submit" />   </fieldset></form>

<form>

This element is a container for all the

content of the form and can contain many types

of other elements, except another <form>

<form action="/register.html" method="post">

<fieldset> and <legend>

The fieldset element is used to indicate a logical group of form controls. A fieldset may also include a legend element

that provides a caption for the fields it wraps.

<label>

This element is used to link up descriptive text with a

form field like an input element. It's fundamental to

making your forms accessible.

<label for="age">Age: </label>

<input type="text" />

One of the most simple types of form control is the text entry field used

for entering a single word or line of text.

<input type="text" name="username" value="" />

<input type="submit" />

By using the type of submit, this control looks like a

button. When clicked, the submit button immediately

sends the collected form data to the server for processing.

<input type="submit" value="Submit" />

<input type="image" src="button.png" />

other common input

<textarea>...</textarea>

This one is a multi-line, scrollable text entry box. You see it many places - like our

competition forms for example.

By giving them the same "name" attribute in groups,

you can have a group of radio buttons restricted to a single

choice.

<input type="radio" />

<input type="radio" name="vote" value="a" />

<input type="radio" name="vote" value="b" />

<input type="radio" name="vote" value="c" />

<input type="checkbox" />

<input type="checkbox" name="t-and-c" checked="checked" />

For single or multiple selections. We commonly use

these to get visitors to indicate that they have read our terms

and conditions.

<select><option>...

The select element, which contains option elements, displays as a pull-

down menu by default when no size

is specified or if the size attribute is set to 1. In pull-down menus, only

one item may be selected

block quotes

<p> Renowned type designer, Matthew Carter, has this to say about his profession:</p><blockquote>  <p> Our alphabet hasn't changed in eons; there isn't much latitude in what a designer can do with the individual letters. </p>  <p> Much like a piece of classical music, the score is written down – it’s not something that is tampered with – and yet, each conductor interprets that score differently. There is tension in the interpretation. </p></blockquote>

preformatted text

We told you browsers ignore white space between elements in html right?

What if we wanted to keep the whitespace, like tabs and spaces... intact?

Wrap it in the <pre> ... </pre> tags,and you let the browser know that it's

preformatted!

the syntax glossary

http://apnwebdev.pbworks.com/Syntax-Glossary

more references

http://www.htmldog.com/guides/  - Guides on best practice web stuff.

http://www.w3schools.com/tags/default.asp - The XHTML tag references.

http://www.w3schools.com/css/css_reference.asp - The CSS property references.

next week...

The CSS Box Model