18.11.2016 Views

web-3t

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Web design 1: Introduction to creating a <strong>web</strong>site<br />

and attributes - apply to individual cells<br />

Attribute What it does Values<br />

width<br />

sets the width of an<br />

individual cell and therefore<br />

a column<br />

pixel value (eg 100) or<br />

percentage (eg 50%)<br />

align<br />

valign<br />

colspan 7<br />

rowspan 8<br />

sets the horizontal alignment<br />

of content within individual<br />

cells<br />

sets vertical alignment of<br />

content within the individual<br />

cells<br />

sets the number of columns<br />

a cell is to span<br />

sets the number of rows a<br />

cell is to span<br />

left (default), center or<br />

right<br />

top, middle (default) or<br />

bottom<br />

integer (that is, 2, 3, 4, etc.)<br />

integer (that is, 2, 3, 4, etc.)<br />

Note<br />

For example:<br />

<br />

will set/change the properties of a cell to centre the content at the top of the cell and the<br />

width to 20% of the table width.<br />

By setting the width of one cell, you set the width of the corresponding column.<br />

The colspan and rowspan attributes probably require further explanation. They are<br />

used to increase the width of a cell to span more than one corresponding cell in<br />

neighbouring rows or columns. The following example of a table shows a three-column<br />

table in which the first row consists of a cell spanning all three columns.<br />

Figure 17 - table with cells spanning 4 columns and 3 rows<br />

This example would be coded as on the following page:<br />

7 See glossary<br />

8 See glossary<br />

Web design 1: Introduction to creating a <strong>web</strong>site (<strong>web</strong>-t3) 24

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!