UNIT F: PLANNING A TABLE.
A table is a useful
way to summarize many types of information, including the differences
among a list of
items or the results of a database search. You can also use tables to tailor
Web page design by controlling
element positioning. Data in a table is organized into
rows and columns; a
row is a single horizontal line of data, and a column is a single
vertical line of
data. The intersection of a row and a column is a single unit of table
data called a cell.
Many aspects of tables are customizable.
Some of the many
attributes for controlling a table’s appearance include:
1.
Structure
and border: -à You can customize a table to include
exactly the number of columns and rows that your data requires. You also can
modify a table’s structure so that one or more cells span multiple rows or
columns. By default, each cell is slightly separated from the cells that
surround it. To make the boundaries between cells clearer, you can add cell
borders to a table. HTML allows you to customize border color and thickness.
2. Alignment: -à Just as with standard Web page elements or
paragraphs of text, you can align cell contents along the cell’s right or left
edges, or center it between the two edges. Additionally, you can set the
vertical alignment flush with the top or bottom cell
border, or centered between the two borders. The default alignment
for a table cell is horizontally left aligned and vertically centered.
3.
Background:
-à By default, a Web page table is transparent, showing the same
background image or color as the Web page. However, you can apply a custom
background color to the entire table, specific rows, and individual cells.
4. Dimensions: -à In addition to customizing the number of
rows and columns in the
table structure, you can specify the sizes of table elements, as
well as the spacing between them. You can set the entire table to a fixed width
or height, or you can specify table dimensions as a percentage of the window
size. You also can set the amount of blank space around the contents of each
cell, as well as the amount of space between cells.
5.
Positioning:
-à Because tables are so flexible and customizable, Web designers have
found many uses for them. Tables are commonly used to position page elements
and control page layout. While the W3C recommends CSS over tables as a method
of controlling element positioning, some complicated designs are easier to
achieve when tables are used.
HTML table tags:
Tag(s) Function
<table>…</table>
Defines start and end of table contents
<tr>…</tr>
Marks contents of each table row
<th>…</th>
Marks contents of a table heading cell and applies table heading format
<td>…</td>
Marks contents of a table data cell
<caption>…</caption>
When coded within a table, formats text to appear as a table
caption
|
|
|
|
|
|
|
|
|
|
|
|
