Table is a matrix like structure which holds objects such as text, images, buttons and etc in its cells. In
most professional web pages they are used in web pages to place adjust text and image positions even
though you do not see table borders. Later you will see how it is possible to set the border size of
tables to 0 to hide them.
Drawing a table
To draw a table we use <TABLE> tag. <TABLE> tag needs to related tags for its rows and columns. <TR></TR> tag is used to create a row in table. Each <TR></TR> tag nested in <TABLE> </TABLE> tag will create a new row in the table. In addition one or more <TD></TD> tags are
used to create columns in each row. Following example produces a table with two rows.
<TABLE>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
If you browse this code in a browser, you will not see any table but two lines of text. In fact table is
there but you cannot see it. <TABLE> tag will by default create a table with border size of 0. You must use a “border” parameter
to specify a border size for your table.
<TABLE BORDER=1>
<TR>
<TD>First Row</TD>
</TR>
<TR>
<TD>Second Row</TD>
</TR>
</TABLE>
Specifying table sizes
You can specify width for a table both in percents of page width and in pixels. This means if user resizes
browser window, browser will maintain a width of 50% of its window for the table.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
If you want you can determine table width in pixels. In this way width of the table will be fixed and
resizing the browser window will not have any effect on the table size.
<TABLE WIDTH=250px BORDER=1>
<TR>
<TD>Cell Row1 Col1</TD>
<TD>Cell Row1 Col2</TD>
</TR>
<TR>
<TD>Cell Row2 Col1</TD>
<TD>Cell Row2 Col2</TD>
</TR>
</TABLE>
You can specify a height for your table too. Width and height of the table will be divided between cells
in rows and columns so if table width is 100 pixels and there are 2 columns then width of each cell will
be 50 pixels. Just pay attention that if you put a long text in a cell which is longer than the cell itself, cell
will be expanded to fit the text in it.
Text alignment in table cells
By default text entered in a cell will appear at the left side of the cell. You can add either of below
options to <TD> tag to specify horizontal alignment of text inside the cell.
<TD ALIGN=CENTER> or
<TD ALIGN=RIGHT> or
<TD ALIGN=LEFT> (this option is the default if you do not specify)
You can also determine vertical alignment of text in a cell by adding VALIGN option to <TD> tag.
There are three values for VALIGN option : TOP, BOTTOM and MIDDLE. MIDDLE is default
value if you do not use this parameter.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=50% HEIGHT=100 BORDER=3>
<TR>
<TD ALIGN=LEFT VALIGN=TOP>TOP LEFT</TD>
<TD ALIGN=RIGHT VALIGN=TOP>TOP RIGHT</TD>
</TR>
<TR>
<TD ALIGN=LEFT VALIGN=BOTTOM>BOTTOM LEFT</TD>
<TD ALIGN=RIGHT VALIGN=BOTTOM>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS
As we mentioned earlier, tables are also used to hold images in their places. You can insert an image in a
table cell by enclosing <IMG> tag between <TD></TD> tags of a certain cell.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=4>
<TR>
<TD><IMG SRC="bgimage.jpg"></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Exercise
Important: Do not use any html authoring program like MS FrontPage,
Expression or Dreamweaver. You must work on the codes using a simple text editor.
1. Create a 3*3 table. Use same alignments and make titles of table, rows and columns as bold.
2. Create a 2*2 table. Insert an image file (small sized) in each cell of table. Adjust cell alignment of each cell so that images gather at the center of the table sticking to each other. Adjust table width to 50% of web page width. Set the height of the table to 200.
From what we have above, we see that tables are important in web design because they help in
holding text, pictures, buttons, etc. in their places. We will be exporing more options about table cells (cell padding, cell spacing ) and finally we will learn how to link different parts of a single image to different web addresses.
Cell Width (Column Width)
In previous lesson we learned how we can determine width and height of a table.
<HTML>
<HEAD>
<TITLE>Table: Column widths not specified</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above table we have not determined sizes for two cells in first row. However you can determine
width of each column in your table by specifying width of cells in first row. Just be careful to specify
correct sizes. For example if your table width is 200 pixels sum of cell widths in a row must be exactly 200 otherwise each browser will render the page differently because of the wrong setting.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS
First column 140 Pixels wide, second column 260 pixels wide
You can also determine cell widths in percent. Sum of cell width percentages must be 100%.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=35%>TOP LEFT</TD>
<TD WIDTH=65%>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
When you determine sizes of first row cells you do not need to determine widths for second row cells
etc.
If you want a cell to be empty, you cannot omit definition for that cell or just leave its content empty.
Insert cell definition (using <TD> tag), and enter a between <TD></TD> tags. As we told in earlier lessons this means a space character. You must enter at least a single space in this form if you
need an empty cell, otherwise area of the cell will not appear like an empty cell. Browsers will not render
the cell correctly.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=400 HEIGHT=100 BORDER=3>
<TR>
<TD WIDTH=140>TOP LEFT</TD>
<TD WIDTH=260> </TD>
</TR>
<TR>
<TD> </TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In above example we have two empty cells but because we have specified both table size and column
sizes, table will not lose its shape and first column will be 140 pixels wide and the second column will be
260 pixels wide. If we remove sizes, we cannot guarantee how it will be displayed on different browsers
and screen modes. We urge you to determine table sizes in every table you create. If you want your
tables resize automatically to fit the browser window, you need to use percent sizes but if you want fixed
width tables, use pixel sizes for your tables. Also if you want the size of a cell to be exactly the same as a
picture (which is put inside it) you need to use pixel size.
Cell padding
You can specify two other important size parameters for a table. Cell padding is the space between cell borders and table contents such as text, image etc.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
Cell padding effect : <BR><BR>
<TABLE BORDER=3 CELLPADDING=20>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS
Cell Padding
Default value for this option is 1. It means the contents of a cell will have a distance of one pixel with
borders. If you don't want any space between objects inside the cells and its borders you can determine a
value of 0 for this option. You can also increase the padding size. In above example we have set a
padding of 20 pixels to show you the effect. We have added a few arrows to the picture to show the padding distance.
Cell spacing
Cell spacing parameter determines the space between inner (cells) and outer parts (outer border) of a
table. In fact a table is constructed form two borders. A outer border area and a cell border area. There
is a space between cell area and outer border. We call this "cell spacing". If you increase this value you
will have a thick border. Default value for this property is 2. If you specify 0 for it, you will have a very
thin border.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
Cell spacing effect : <BR><BR>
<TABLE BORDER=3 CELLSPACING=20>
<TR>
<TD>TOP LEFT</TD>
<TD>TOP RIGHT</TD>
</TR>
<TR>
<TD>BOTTOM LEFT</TD>
<TD>BOTTOM RIGHT</TD>
</TR>
</TABLE>
</BODY>
</HTML>
YOU WOULD HAVE SOMETHING LIKE THIS
Cell Spacing
You can also mix cell spacing and cell padding options to make specific tables you need.
Tables and images
Sometimes you need an image which each section of it links to a different website address. When user
clicks on different parts of the picture they will be navigated to different pages. In previous lessons you
learned how to use an image as a link. In this special case you can cut your picture into as many parts as you need and insert them in a table
that holds image parts beside each other. Then link each image part to a different page. You will also
need to set both cell spacing and cell padding to a value of 0 to prevent the table from appearing
between image parts. In this way users will see a single image but when they click on different parts of
the image they will go to different addresses.
There are other methods of using image maps to accomplish the above purpose but we do not discuss it in this here.
Cells, rows and table itself can be painted with colors. In addition each cell or the whole table can have
images as their background.
Table background color
Newer browser software (IE, Netscape and Firefox) support background colors for tables. It is possible
to specify background color for a table inside <TABLE> tag.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BGCOLOR="#66CCFF">
<TR>
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
It is possible however to specify different colors for each row or even each cell of the table. If you want
to specify a color for an entire row, you can use BGCOLOR option inside <TR> tag.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#66CCFF">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR BGCOLOR="#CCFFFF">
<TD width="50%">C</TD>
<TD width="50%">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
As we mentioned earlier, it is also possible to specify a color for individual cells by using BGCOLOR
option in <TD> </TD> cell tags. You can of course mix all above options to create a specific table
design. In the example below, we change color of the first row to "#336699". We also change color of two cells in second row to "#66CCFF" and "#CCFFFF" respectively.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE width="300" BORDER=1>
<TR BGCOLOR="#336699">
<TD width="50%">A</TD>
<TD width="50%">B</TD>
</TR>
<TR>
<TD width="50%" BGCOLOR="#66CCFF">C</TD>
<TD width="50%" BGCOLOR="#CCFFFF">D</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Column Span
Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to
join two first cells with each other to create something like Figure 7-4. COLSPAN=2 in <TD> tag
means this specific column (cell) will span to two cells instead of one.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=300>
<TR>
<TD COLSPAN=2 WIDTH=100>A</TD>
<TD WIDTH=100>B</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Joining two columns using colspan
If you have 3 cells in each row by default and you extend a cells using COLSPAN=2 to two cells you
should have two <TD> tags in that row instead of 3. In above figure 7-5, for the first row we have two
<TD> tags and for second row we have 3 of them. Also if you define a width of 100 for a cell which
has a COLSPAN=2, the resulting joined cell will have a width of 200.
Row Span
This time we want to join two cells in a column (from different rows) to each other. This is very similar
to previous section with the difference that we now want to join cells from different rows rather than
cells in different columns. We use ROWSPAN instead of COLSPAN to do this.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=200>
<TR>
<TD ROWSPAN=2>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Joining two rows using rowspan
Again when you have joined two cells using the option ROWSPAN=2 and your table has a total of 2
rows, first <TR> which shows the first row will contain 3 cells or <TD> tags but second row will have
only 2 cells (because the first cell of second row has been joined to a cell in first row and actually has
become a part of first row). Look carefully at example 7-5 and try to understand how ROWSPAN
works. Again you may mix different tags to create your custom designed tables.
Nested Tables
In HTML (and also in Word processors) it is possible to nest tables in each other. If you are going to
design complicated web pages you will do this most of the time. For example let’s assume you need a
table with a border size of 3 in a specific part of a web page. To fix the position of that table in your
desired place you can use a table with border size of 0 (hidden) which is just supposed to help us to
position the other table. Nested table code is almost straightforward.
<HTML>
<HEAD>
<TITLE>Lesson 7</TITLE>
</HEAD>
<BODY>
<TABLE border=0 width=500>
<TR>
<TD width="25%"> </TD>
<TD width="25%"> </TD>
<TD width="25%">
<TABLE border="2" width="100%">
<TR>
<TD width="50%">1-</TD>
<TD width="50%">HTML</TD>
</TR>
<TR>
<TD width="50%">2-</TD>
<TD width="50%">C Prog.</TD>
</TR>
<TR>
<TD width="50%">3-</TD>
<TD width="50%">JScript</TD>
</TR>
</TABLE>
</TD>
<TD width="25%"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
In this example we have a 1*4 table. We want to hold our main table inside this table in its third column
so that our main table will be shown in right side of the center of the screen. Main table has a border
size of 1 while first table is hidden. In below figure you can see both the hidden table and the main table.
No comments:
Post a Comment