Difference between revisions of "HTML 2"
(Lists & Tables) |
(Tables) |
||
Line 27: | Line 27: | ||
<td>B2</td> | <td>B2</td> | ||
</tr> | </tr> | ||
+ | </table></nowiki> | ||
+ | |||
+ | Tables can get very rich with data. Here is a table with a complete header and footer, as well as some extra fanciness. | ||
+ | <nowiki> <table> | ||
+ | <thead> | ||
+ | <tr> | ||
+ | <th>A</th> | ||
+ | <th>B</th> | ||
+ | <th>C</th> | ||
+ | <th>D</th> | ||
+ | </tr> | ||
+ | </thead> | ||
+ | <tfoot> | ||
+ | <tr> | ||
+ | <td colspan="4" style="text-align: center;">Page 1 of 1</td> | ||
+ | </tr> | ||
+ | </tfoot> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <td>A1</td> | ||
+ | <td colspan="2" style="text-align: center;">B1</td> | ||
+ | <td>D1</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td rowspan="2">A2</td> | ||
+ | <td>B2</td> | ||
+ | <td>C2</td> | ||
+ | <td rowspan="2">D2</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>B3</td> | ||
+ | <td>C3</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>A4</td> | ||
+ | <td colspan="2" style="text-align: center;">B4</td> | ||
+ | <td>D4</td> | ||
+ | </tr> | ||
+ | </tbody> | ||
</table></nowiki> | </table></nowiki> | ||
Revision as of 04:19, 15 November 2013
Images
Images have two important numbers which must be observed when using images on webpages. The first, are the dimensions of the image, in pixels. The second, is the size on disk, in bytes. For example; a common digital camera might take an image with dimensions of 2000x2000, and that file might be about 1MB.
Lists
Lists come in two flavors; ordered and unordered. Within a given list, there should be list items. The structure looks like this:
<ol> <li>item number 1</li> <li>item number 2</li> </ol>
<ul> <li>bullet number 1</li> <li>bullet number 2</li> </ul>
There are lots of neat things that can be done with lists, using CSS. Stay tuned!
Tables
Tables are a great way to display things. Tables consist of rows and cells
. Here is a basic structure:
<table> <tr> <td>A1</td> <td>B1</td> </tr> <tr> <td>A2</td> <td>B2</td> </tr> </table>
Tables can get very rich with data. Here is a table with a complete header and footer, as well as some extra fanciness.
<table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> </tr> </thead> <tfoot> <tr> <td colspan="4" style="text-align: center;">Page 1 of 1</td> </tr> </tfoot> <tbody> <tr> <td>A1</td> <td colspan="2" style="text-align: center;">B1</td> <td>D1</td> </tr> <tr> <td rowspan="2">A2</td> <td>B2</td> <td>C2</td> <td rowspan="2">D2</td> </tr> <tr> <td>B3</td> <td>C3</td> </tr> <tr> <td>A4</td> <td colspan="2" style="text-align: center;">B4</td> <td>D4</td> </tr> </tbody> </table>
Blocks
HTML Block Elements
Block level elements normally start (and end) with a new line when displayed in a browser.
- h1
- p
- ul
- table
HTML Inline Elements
Block level elements normally start (and end) with a new line when displayed in a browser.
- b
- a
- img
- td