Tables: Data in Rows and Columns

1

• Tables Data in Rows and Columns
• What is Table?
• How Tables are Used?
• Designing Tables
• Table, Cell, Row Attributes
• Using Tables for Alignment
• When Tables Go Wrong?

2

• Objectives
• Insert a table into an HTML document
• Manipulate the style, color, and width of a
  tables border
• Set the size of a tables margin, cell spacing,
  and cell padding
• Change a tables width within the browser pane
  and cell width within the table
• Use background colors within a table
• Float text to the right or left of a table
• Place captions above and below a table
• Using Tables for Alignment
• When Tables Go Wrong?

3

• What is Table?

Tables consist of horizontal rows and vertical
columns which can be formatted according to your
needs. The intersection of a row and a column
is called a cell. HTML cells contain either
data, numbers, text, an image -or header
information describing the data in a column or
row.
C L U M N
ROW
4

• How Tables are Used?

Organize information in a row and column
format (Present tabular information) Present
any type of information for which you want a lot
of control over the positioning the
material (Newspaper-like appearance Control
Layout)
5
Table Containers
lttablegt....lt/tablegt ? encloses the
table ltthgt....... lt/thgt ? defines the table
headers lttrgt.........lt/trgt ? defines the table
rows lttdgt.........lt/tdgt ? surrounds the actual
table data ltcaptiongt...lt/captiongt ? allows you
to place a caption either above or below the
table. The latest HTML specifications added five
new table tags that let you format table columns
and format and scroll portions of long
tables lttbodygt....lt/tbodygt () ? identifies a
scrollable area of a table lttheadgt.....lt/theadgt
() ? appears above the scrolling
body lttfootgt.......lt/tfootgt () ? appears
belove the scrolling body ltcolgroupgt..lt/colgroupgt
()? provides means for combining a group
of columns in a table ltcol/gt () ? allows you
to control the appearance or attribute
specifications for one or more tables
6

• Designing Tables

ltTABLEgt ltTRgt ltTDgtRow 1, Column
1lt/TDgt ltTDgtRow 1, Column 2lt/TDgt
lt/TRgt ltTRgt ltTDgtRow 2, Column 1lt/TDgt
ltTDgtRow 2, Column 2lt/TDgt
lt/TRgt lt/TABLEgt 1. For each ROW, begin with
ltTRgt, end with lt/TRgt 2. For each CELL in a Row,
begin with ltTDgt, end with lt/TDgt3. No problem
if you have 1 ROW, many CELLS.4. When you have
more than 1 ROWS, might be a Problem.
Why?Because, number of CELLS must be SAME at
each ROW. Rule of MATRIX.
Cell 1(R1C1) Cell 2 (R1C2)
Cell 3 (R2C1) Cell 4 (R2C2)
Cell 1 Row 1, Column 1 Cell 2 Row 1, Column
2 Cell 3 Row 2, Column 1 Cell 4 Row 2, Column
2
7

• Table, Row, Cell Attributes

lt Table width "100 (you may use percentage
of window or pixel ) height 5"
cellspacing "3" cellpadding "3"
border "2" bordercolor "008000"
background "bilkent.gif" bgcolor
"C0C0C0 align "right" rules() row
? controls the border around individual
cell (none just outside, column just
columns) frame() border? which sides of a
tables border are visible box, void,
above, below, hsides, vsides, lhs (left hand
side), rhs. gt
8

• Table, Row, Cell Attributes

lt tr width "100 (you may use percentage
of window or pixel ) height 5" border
"2" bordercolor "008000" background
"bilkent.gif" bgcolor "C0C0C0 align
"right" valign right gt lt td width
"100 (you may use percentage of window or
pixel ) height 8" border "2"
bordercolor "008000" background
"bilkent.gif" bgcolor "C0C0C0 align
"right" valign right gt
9

• Using Tables for Alignment

Q1. Assume that write the name of the lecture
on Left alignment. write the date on Right
alignment. BOTH must be on the same LINE. Once
you give an ALIGMENT property to a line, it will
set the whole LINEs property. So, you need to
GIVE 2 different ALIGNMENT PROPERTY at 1 LINE.
Using TABLES is the best way to solve this
Problem. lttable width100gt lttrgt
lttd width50 alignleftgtLecture
63242lt/tdgt lttd width50 alignrightgt
25.10.2004lt/tdgt lt/trgt lt/tablegt
Lecture 63242 25.10.2004
10

• Using Tables for Alignment

Q2. Assume that insert an image named
bilkent.gif. write the date near the
image. They must be vertically CENTERED as shown
in the figure. Once you insert an image, write a
text after it, the texts bottom will be same
level as images one. But, you want it to be
centered. Using TABLES is the best way to solve
this Problem. lttable width100gt
lttrgt lttd width70gt ltimg
srcbilkent.gifgtlt/tdgt lttd width30
valignmiddlegt25.10.2004lt/tdgt
lt/trgt lt/tablegt
25.10.2004
25.10.2004
11

• When Tables Go Wrong?

• If you dont CLOSE your Table TAGS table, tr,
  td
• Assume that you want to build a table, with 2
  rows, and 3 columns.The browser will understand
  this tables dimensions by TAGS, so they must be
  defined correctly
• If the CELL numbers are not equal at each ROW.
• If you create a COLUMN, it must be valid for each
  ROW.?? Is there any way to OMIT, MERGE cells ??
• YES, you should merge cells by using COLSPAN and
  ROWSPAN tag attributes.
• However, you dont need to use them with
  non-authoring tools.