B08 - Tables
- B08a: - (0:41)
- History
- Tables were created for displaying information suited for tables - tabular data.
- Similar to an Excel spreadsheet in how it displays information.
- Used for page layout prior to CSS and still used for that purpose in a few sites.
- B08b: - (2:54)
- Essential table tags
- <table> - all table elements are nested within the table element.
- <tr> - table row. Every row must have this tag. The individual cells are nested within it.
- <td> - "table data" - essentially a cell as in an Excel spreadsheet.
- <th> - a special form of td cell: contents are centered and text is made bold.
- B08c: - (1:53)
- Examples of tables in use and nested tables:
- A nested table goes entirely inside a single cell of the table it is nested within.
- B08d: - (2:18)
- The table tag's attributes:
- border
- width
- cellpadding
- distance between cell contents and cell wall.
- cellspacing
- The above are deprecated in html5 and the same appearance is supposed to be accomplished using CSS, but you will still see these attributes.
- B08e: - (3:29)
- td and th attributes
- There are several but I will discuss only:
- colspan
- Allows a cell to extend into more than one column.
- The default is 1
- If colspan=2 is used, then there needs to be one less td or th tag in that row.
- rowspan
- Allows a cell to extend into more than one row.
- The default is 1
- If rowspan=2 is used, then there needs to be one less td or th tag in the second row.
- B08f: - (6:13)
- Assignment:
- Create a file named:
- Create a table as seen in the video.
- Give the table tag the following attributes and values:
- border=1
- width=60%
- This means the table will fill 60% of the width of the browser window.
- The top row's only cell spans all four columns and is bold and centered.
- Accomplish the bold and centering using one of the tags discussed above, do not use the <strong> or <b> tags to make their text bold.
- The second row's cells are also bold and centered (but are not spanned). Use the same method to make their contents bold and centered.
- Put three cities that are in each continent into the cells each column as per video.
- You can use the same cities used in the list items exercise if you like.