1. TABLES, LISTS & IMAGES

2.  Tables are defined with tag.  Table is divided into rows and columns.  Table must have at least one row and one column  Table row is defined with, and data cell with tag.  holds content of a data cell like text, images, list, forms and other table.  In (X)HTML, tables are the simplest mechanisms of managing layout of your content.

3.  Example row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

4.  Header information in a table are defined with the tag. Example Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

5.  The rowspan attribute specifies the number of rows a cell should span. Syntax n – specify number of rows a cell should span  The colspan attribute defines the number of columns a cell should span. Syntax n – specify number of columns a cell should span

6.  Table elements can be organized into three parts. 1. - group header content 2. - group body contents 3. - group footer content  The,, and elements will not affect the layout of the table by default. However, you can use CSS to style these elements.

7. row 1, cell 1 row 1, cell 2 Row 2 Span Two columns Span Two rows row 3, cell 2 row 4 cell 2

9.  There are three types of list 1. Ordered list 2. Unordered list 3. Description list  Ordered list o An ordered list starts with the tag. o By default, list items are marked with numbers Example Coffee Milk

10.  Unordered list o An unordered list starts with the tag. o By default, list items are marked with bullets Example Coffee Milk

11.  Description Lists o A description list is a list of terms/names, with a description of each term/name. o The tag is used in conjunction with (defines terms/names) and (describes each term/name)

12.  Example Coffee - black hot drink Milk - white cold drink

13.  CSS list properties allow you to o Set different list item markers for ordered lists and unordered list o Set an image as the list item marker  The type of list item marker is specified with the list-style-type property:  Example ul {list-style-type: square;} or ol {list-style-type: lower- alpha;} an image as item marker ul {list-style-image: url(‘arrow.gif'); }

14.  Example Coffee Milk

15.  Example Coffee Milk

16.  Images are added into the (X)HTML document by using the tag.  Syntax  url = where the image file is located relative to your site including name and extension of the file such as.jpeg,.png, etc.  alt= the alternative text to be shown if the image can not be shown  width, height = dimensions of the image on the page

17.  Example: 