Web Design Tutorial - HTML, JavaScript, and Style

TABLES

Used to display content in rows and columns
Widely used to position content by setting borders to 0
Primary tags include:

TAG	DESCRIPTION
<table></table>	Contains table rows
<tr></tr>	Row - contains cells
<td></td>	Cell (column) - content goes in these
<th></th>	Heading cell - headings go here (optional)

Basic attributes include (more will be discussed in the next lesson):

ATTRIBUTE	DESCRIPTION AND EXAMPLE VALUES
align	Sets horizontal alignment - left, center, right,
bgcolor	Sets background color of a cell or table - red, #eeeeee,...
border	Sets border - 0, 1, 2, ...
height	Sets height of table or cell - 100px, 50%,...
width	Sets width of table or cell - 24px, 33%,...

EXAMPLE

Font Size: 8pt 12pt 16pt 20pt 24pt Window Height: Small Large

Window Size: Minimum 50% 75% 100%

PRACTICE

1. Create a table to hold your schedule.

2. Create a table that meets the following requirements:

It has 2 rows and 3 columns
It completely fills the page
Its background color is yellow
The contents are vertically aligned to the top of each row
The contents of each cell are horizontally aligned to the left of each cell
The first row is 75% of the height of the table
The first and last columns are 120px wide

3. Experiment with tables in a Design Tool.

Create a table using the menu.
Set properties of the table and its cells in the properties window
Check out the code for the table. Modify the code directly. Notice that you are provided options.
Right-click on the table in the Design view and modify the table by adding or deleting rows.

SELF-QUIZ