QuickRead 8: Tables
| Tables <table attributes> | |||||||||||||||||||||||||||||
To present text and images at fairly precise locations
around a page, you'll need to use tables. They are also used to modularize and
organize information into readable and understandable displays. Did I mention
they can get to be a real pain to build some times.
<table border=2 width=500 height=200> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> A table is made of rows and columns. Once you have the opening and closing <table> tags in place, you have to build the table one row at a time. Let's start at the at the first row. The tag used to define the row is <tr>. Within the row, each column or cell is defined by <td>. If we want to have three columns we insert three <td> cells. You insert the actual value the cell will hold between the opening and closing <td> tags. Once you are done with the row, close the row. We build the next row and as many other rows in a similar fashion. The attribute border takes a value in pixels and sets the border of the table. If you leave this attribute out, it will default to a zero, that is there will be no border. Width and height can be assigned a value either in pixels or a percentage value of the width of the browser window. It's possible to define the background color of each row and if you would like, of each individual cell. Within a row, you can set the contents of the row to be aligned to the left, right, or center using the align attribute. <tr align=left> To push things vertically we use the valign attribute with top, middle and bottom as it's values. <tr align=left valign=middle> If a row sets an alignment to the left and the individual cells set their alignment to the right, preference is given to the individual cells choice. <tr align=left valign=middle><td>.</td><td align=right valign=bottom></td> Here the row has a specified alignment. While the first cell goes along with it, the second cell has it's own alignment. By default, the content is aligned to the left and vertically aligned to the middle.
<table border=5 width=75% height=300 cellspacing=10 cellpadding=10 align=center> <tr bgcolor=silver align=left><td>1</td><td>2</td><td>3</td></tr> <tr bgcolor=white align=center><td>4</td><td>5</td><td>6</td></tr> <tr bgcolor=white align=right><td>7</td><td>8</td><td align=center valign=bottom>9</td></tr> </table> The table is physically aligned to the center using the align attribute. The first row has it's content aligned to the left. The second row has it's content aligned to the center. The last row has it's content aligned right. As previously stated the conflict between the alignment the third row has set and the alignment the last individual cell has set for itself is resolved by yeilding to the cell. The content for cell in consideration is shifted to the center. It also uses valign=bottom to force the content to the floor. The other attributes you will notice are the cellspacing and cellpadding. Cellspacing is the space between two cells. Cellpadding is the space between the contents of the cell and the border of the cell. From experience, I can tell you that it takes a little practice to get used to tables but it's definitely worth it as what you get essentially is a quantum jump in the control over how your page displays. It's good design to have all your content, whether it's text, graphics or pictures in tables. Make the borders dissapear with border=0. Or, if you want the tables for all they are worth, try changing their color using the attribute bordercolor
<table border=1 width=400 height=200 cellspacing=3 cellpadding=3 align=center> <tr bgcolor=silver><th>1</th><th>2</th><th>3</th></th> <tr bgcolor=white><td colspan=2>4</td><td>6</td></tr> <tr bgcolor=white><td>7</td><td>8</td><td rowspan=2>9</td></tr> <tr bgcolor=white><td>10</td><td>11</td></tr> </table> The first row is now filled with a different kind of cell. It's the header cell which uses the th tag instead of td. It is used primarily when you have table headings for the columns and makes them bold and centered in their cell. Four has expanded to fill the column next to it by using the attribute colspan and the value 2. If the value had been a three, the cell with 6 in it would project out of the table (actually expanding the table size). Nine has expanded to fill the vertical space of two rows using the attribute rowspan and the value 2. Colspan goes to the right and rowspan goes down. | |||||||||||||||||||||||||||||
| . | |||||||||||||||||||||||||||||
| . | |||||||||||||||||||||||||||||
| Get behind the wheel! | |||||||||||||||||||||||||||||
| Try typing out the following. Also use your own stuff.
Be imaginative! <html> <head><title>And then God created tables</title></head> <body bgcolor=black text=white link=orange alink=yellow vlink=purple> <table border=2 width=500 height=200 bordercolor=yellow> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <tr><td>7</td><td>8</td><td>9</td></tr> </table> </body> </html> | |||||||||||||||||||||||||||||
| . | |||||||||||||||||||||||||||||
| Index |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |