The table is very important in web design. Because by using the tags table you can create web pages "divided" on several columns or rows. Examples such as the web page you are reading this.
There are three main elements of tag, or used in the manufacture table: <table>, <TR>, and <td>. To remember is that the tab and <td> <TR> must lie between <table> tag and </ table>
<table>
Consists of attributes:
- align - alignment: the left (left), middle (center) or right (right).
- bgcolor - background color (background) from the table.
- border - table border width (in pixels).
- cellpadding - the distance between cell contents with the cell boundary (in pixels).
- cellspacing - the distance between cell (in pixels).
- width - the size of table in pixels or percent.
Example:
<table Align="center" bgcolor="#0000FF" border="2" cellpadding="5" cellspacing="2" width="90%">
<TR>
This tag is used to create a new line (the table). Consists of attributes:
- align - alignment: the left (left), middle (center) or right (right).
- bgcolor - background color of the line.
- valign - vertical alignment: top, middle or bottom.
Example:
Bgcolor="#0000FF" align="right" <tr valign=top>
<td>
This tag is used to create a new column in the table.
- align - alignment
- background - image is used as the background of the column.
- bgcolor - background color
- colspan - see picture examples
- height - the size of cell height in pixels.
- nowrap - made so that the contents of the column remains on one line.
- rowspan - see picture examples
- valign - vertical alignment: top, middle or bottom.
- width - the size of the column in pixels or percen.
And now, we will learn to create a static bar graph creation by utilizing elements of the table. It was not as difficult as imagined.
Like this:
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Static Bar Graph Creation</title>
</head>
<body>
<span style=" ">Static Bar Graph Creation</span><br />
<br />
<table width="614" height="215" cellspacing="0">
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>
<td colspan="4" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>
</tr>
<tr>
<td height="21" colspan="10"> </td>
<td> </td>
</tr>
<tr>
<td width="199">Polytron Technologies, Inc</td>
<td colspan="6"></td>
<td colspan="3" bgcolor="#006600" style="border-right:#000000 solid;border-bottom:#000000 solid;border-top:#000000 solid;"></td>
<td width="50">+100%</td>
</tr>
<tr>
<td>Hitachi, Ltd.</td>
<td colspan="6"></td>
<td width="65" bgcolor="#006600" style="border-right:#000000 solid;border-bottom:#000000 solid;"></td>
<td colspan="3">+55%</td>
</tr>
<tr>
<td>SANYO Electric Co., Ltd</td>
<td colspan="3"></td>
<td width="35">-23%</td>
<td colspan="2" bgcolor="#FFFF00" style="border-left:#000000 solid;border-top:#000000 solid;"></td>
<td colspan="4"></td>
</tr>
<tr>
<td> Miyako Technology Co, Ltd</td>
<td width="39"> </td>
<td width="73">-150%</td>
<td colspan="4" bgcolor="#FF0000" style="border-left:#000000 solid;border-bottom:#000000 solid;border-top:#000000 solid;"></td>
<td colspan="4"></td>
</tr>
<tr>
<td height="25" colspan="11" style="border-bottom:#000000 solid;"> </td>
</tr>
</table>
</body>
</html>
