The document discusses various HTML elements for tables, forms, block quotes, and preformatted text. It provides examples of how to implement these elements using markup. For tables, it covers the <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> elements as well as rowspan and colspan attributes. For forms, it discusses the <form>, <fieldset>, <legend>, <label>, <input>, <textarea>, <select> elements. It also provides references for further reading on HTML and CSS.

1. More HTML Elements Colin Gourlay & Kevin Vanderbeken

2. Today: Tables Forms Block Quotes

3. tables

4. the good tables

5. when tables are bad

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

8. <table> <th> <tr><td>

9. column & row spans <td rowspan="3"> <td colspan="4"> <thcolspan="4">

10. <td colspan="4">

11. <td rowspan="3">

12. special table elements <thead>, <tfooter> and <tbody> <colgroup> and <col>

13. so how do we actually make tables look good?

14. markup <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> <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> ...

15. style #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 tbodytr:hover td { color: #009; }

16. the result (Table design attributed to Smashing Magazine)

17. forms

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

20. <form> This element is a container for all the content of the form and can contain many types of other elements, except another <form>

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

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

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

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

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

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

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

28. <input type="submit" value="Submit" /> <input type="image" src="button.png"/>

29. other common input

30. <textarea>...</textarea> This one is a multi-line, scrollable text entry box. You see it many places - like our competition forms for example.

31. <input type="radio" /> 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" name="vote" value="a" /> <input type="radio" name="vote" value="b" /> <input type="radio" name="vote" value="c" />

32. <input type="checkbox" /> For single or multiple selections. We commonly use these to get visitors to indicate that they have read our terms and conditions. <input type="checkbox" name="t-and-c"checked="checked" />

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

34. block quotes

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

36. 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?

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

38. the syntax glossary http://apnwebdev.pbworks.com/Syntax-Glossary

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

40. next week...

41. The CSS Box Model