-
-
-
-
-
-
-
Tables can come in extremely useful when designing a website. If you're confused and aren't sure what they're all about, then this guide may be for you.
| | Basics | Font Effects | Links/Images | Table | |
«Basics»
Firstly, what exactly is a table? A table is a collection of data, or maybe HTML files, contained in cells: square areas, sometimes with a border or specified length. Tables can be used to divide layouts into more managable areas, code blogs, organize data, and much more.
All of the data in a table absolutely must be contained within these two tags:
However, it's a bit more complicated than that.
We will now explore the two tags that essentially give tables their shape: the TR and TD tags.
"TR" stands for "Table Row," and it is exactly that: you use the TR tag every time you want to start a new row on your table; it's a bit like pressing "enter" or "return" on your keyboard, except with tables. Take note that you need to end each TR tag that you begin, as with most other tags in HTML.
Example:
| Content goes here. |
| This is a new table row. A TR tag was used, in this case, to form this new row. |
Code:
"TD," on the other hand, is for "Table Data:" each new TD tag that you place in your document will create a new cell. If you place two closed TD tags in a row, they will appear next to each other seamlessly, unless you have used a TR tag between them (in that case, the two cells will be placed on two different rows).
Example:
| This is a table cell. | Here is another one. This table also uses the TD tag. |
Code:
"Cellpadding" and "cellspacing" define what the table will look like, to a more tedious extent. Cell padding regulates how much space exists between the content of a cell and its border. Cellspacing determines exactly how much distance exists between cells. As you might guess, for both tags, the greater the number used, the larger the distance. To demonstrate the use of cellspacing and cellpadding...
Example:
| This table has a cellpadding of 15... | ... and a cellspacing of 1. |
Code:
Example:
| This table has a cellpadding of 1... | ... and a cellspacing of 15. |
Code:
"Table Header," or TH, is a tag that allows you to easen your task of creating a table by creating "headers," or cells with a different type of data in them. For example...
Example:
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell content. | Cell content. | Cell content. |
| Cell content. | Cell content. | Cell content. |
Code:
With these simple tags for ingredients, you have all that you need to create a simple table, as long as you are able to alter the variables such as the cellpadding and cellspacing tags, and add more TD and TR tags. The following codes will simply be a guide to making your tables a bit fancier...
«Borders and Backgrounds»
To change the border color of your table, simply add the bordercolor="your color goes here" tag to the opening of the table, like so:
Example:
| This table has a blue border. |
Code:
You can add this to any table - just replace the "your color goes here" with the color you intend your table border to be (hex codes and worded colors both work).
The act of changing the background color of a table is simple as well:
Example:
| This table has a yellow background. |
Code:
Now, we can add the two together to get...
Example:
| This table has a blue border AND a yellow background. |
Code:
You can also change the border width to a different number than "1," which will, as you may guess, make your border thicker as your border thickness grows higher.
Example:
| This table is indentical to the one above, except that it has a border thickness of "10". |
Example:
| This is the same table yet again, but it has a border thickness of "0". |
«Specified Heights and Widths»
You can create a table so that, rather than the table taking the shape of the content inside it, it will remain a fixed height and/or width.
There are generally two methods you can use: 1.) Sizing using percents, and 2.) Sizing using pixels. When using percents to specify the width of your table, you include in your code what percent of the screen that the table should fill up; when you use pixels, you specify how long or wide in pixels the table should be.
Example:
| This table is 30% of the width of the page. |
Code:
You can do the same with individual cells:
Example
| This cell is 40% of the width of the table. | This cell is 60% of the width of the table. |
Code:
As for using pixels to specify length, the procedure is much the same:
Example:
| This table is 200 by 150 pixels. |
Code:
As for individual cells with a specified height/width:
Example:
| This cell is 100 by 200 pixels. | This cell is 100 by 200 pixels. |
Code:
«Aligning and Valigning»
When you align something, you specify whether it will be on the right, center, or left horizontally. When you valign something, you specify whether it will be on the top, middle, or bottom vertically.
If you wanted text in a cell to be centered, here is what you would use:
| td align=center |
Cell content is normally set to be aligned right and valigned center by default.
Likewise, just replace the "td align=center" with what's in the boxes here to create the respective effect:
| td align=right | td align=left | td valign=top | td valign=bottom | td valign=center |
Also, you can align/valign a whole row by adding the code to the TR tag. Example...
That's basically what tables are all about. Have fun!
Report an error |
Change your site settings |
