Transcript
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
top related