F.4 CIT – HTML – Table
page 1
Introduction A table is composed a number of cells and described by the number of rows and columns. In HTML, tables is defined by
tag and cells are specified by | and | tags. Text, image or other tags which can be put in the tag can also be put into table cells. Also, the cells in tables can be merged and split. However, in HTML, different rows can have different number of cells. Due to the flexibility of tables, tables provide designers with broader applications. One of the applications is image slicing, a function which can be found in many latest graphics software. Defining Table In defining a table, a number of tags are used together. These tags includes: , , , , | , | and .
Tag: It creates a table. Usage:
Attributes: 1.
align:
Alignment of the text inside. Possible value: CENTER | LEFT | RIGHT
2.
background: Background image of the table
3.
bgcolor:
Background colour of the table
4.
cols:
Number of columns
5.
height, width:
Height and width of the table. Possible value: number of pixels | auto
6.
border:
7.
cellpadding: Distance between the cell border and its content
8.
cellspacing: Distance between two cells
Width of table border
Tag: It creates a table header that browsers can pace intelligently when dealing with long tables. Usage:
Attributes: 1.
align:
CENTER | LEFT | RIGHT
2.
valign: TOP | MIDDLE | BOTTOM | BASELINE
3.
background
4.
bgcolor
F.4 CIT – HTML – Table
page 2
Tag: It defines the body of a table separate from any header or footer. Usage: ... … ...
Attributes: The same as tag.
Tag: It creates a table footer. Usage:
Attributes: The same as tag.
Tag: It defines a row in a table. Usage:
Attributes: Similar to other tags of a table.
Tag: It defines header cells ni tag. Content enclosed by the tag is center-justified and bold. Usage:
F.4 CIT – HTML – Table
page 3
Header 1 | Header 2 | ...
|---|
...
Attributes: Similar to other tags of a table, except that | supports rowspan and colspan.
| Tag: It defines a table cell. Usage:
Attributes: Same as | tags.
Merging Cells Cells can be merged by using colspan and rowspan attributes in | and | . colspan merges horizontal neighbouring cells while rowspan merges vertical neighbouring cells. The values of colspan or rowspan specifies the number of cells that are merged. Example: | 1 | 2 | | 3 | 4 |
F.4 CIT – HTML – Table
page 4
Draw the result shown on your browser.
Image Slicing We can put images into table cells, and different images can be put together yet retain the sizes of the images and the structure of the table. Such flexibility is done by using the colspan and rowspan attributes. Due to this flexibility, a large image is cut into smaller pieces (called slices) for download and such technique is called image slicing. Image slicing improves the download speed of large images because a number of slices can be downloaded at the same time and some of the slices can be replaced, thus reducing the overall image size. In writing code for image slicing, we have to note the following: 1. Border size, cellspacing and cellpadding attributes should be set to 0 2. Images of pure colour is replaced by cell with the same background colour 3. Cells without image (those mentioned in (2)) should have a content &nbdp;, Otherwise, the table cell will collapse. Although image slicing is useful, it is tedious to write the HTML code. Therefore, many latest graphics Exercise: 1. Apply image slicing by using Macromedia Firework. 2. Change the values of different attributes. 3. Open the HTML source code and try to understand the codes.
Related Documents
| |
| |
