| ||
Tables – HTML Basics and Tutorial
s a part of our web design layout. This guide covers the usual HTML attributes and styles that can be applied to tables. Tables add a different dimension to displaying your contents and whether you have a football match fixture, menu, and song, price or grocery lists, putting them in a table format is certainly neater.
Most of us would have either used or come across tables that display data or information. If you have used word processor or spreadsheet softwares, you should be familiar with these terms, which apply as well to our discussion here:-
“row” - a horizontal line of units
“column” - a vertical line of units
“cell” - each unit or data compartment enclosed by the borders
Let us look at some examples to illustrate how the HTML table codes work and where you can place them.
Placement of the Table Code
To create a table in a Blog post, simply type in the HTML codes (mentioned below) when you are writing your post. See that you are in “Edit HTML” mode rather than “Compose” mode when the code is inserted.
If you want the table to be displayed in your sidebar or elsewhere in your template, go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript” to paste the code.
Basic Table
The HTML for the above table is this.
Note:
1. It should begin with a <table> tag and end with a closing </table> tag.
2. We have specified the border as 1px. You can set it to “0” to have no visible border or set it to any other value.
3. Try to specify a width at all times. This improves the speed of page loads since the browser would be able to set aside the space required for the table. When you view your template source code, the width allocated for your Blog posts should be found under #main or #main-wrapper and your table width will have to be less than that. If you do not set a width, the table will by default take up the full width.
4. The cellpadding is the amount of white space between the content and the borders. If there is no cellpadding, you will find the text very close to the border.
5. Cellspacing is used to define the distance between each cell.
6. Every row starts with a <tr> tag and ends with a </tr> tag. In this example, we have 2 rows, the portion colored blue being the first row, and the portion colored red being the second row.
7. Within every row, we have the contents governed by the <td> (table data) tags. You would notice that in the first row, the first data cell “Height:” begins with <td> and ends with </td>. Every data cell will have to be enclosed within such tags.
8. The contents in each data cell need not be plain text. You can insert pictures, images, links, videos, etc. For instance, we could replace “Height:” with a picture code that looks like this “<img src="Image URL" />” to insert a picture that we have uploaded onto a photo server. For more on the links and image codes to insert, you may refer to our guide at Hyperlinks and Image Links.
Text Formatting
You may want to change the text font face, font-size or color and make the text bold or italic. You can even align the text either to the left, center or right of the cell. We'll suggest a method that is easy for all of us to adopt, without having to learn complicated style codes. Create a new draft post. Choose “Edit HTML” mode and paste the above table code. Now, view the post under “Compose” mode. Using the rich-text editor, change the font, color and alignment to whatever you like. All the style codes will be automatically inserted and what-you-see-is-what-you-get.
If you want the table in your sidebar, do the same, create the table in a draft post and use the rich-text editor to insert the style codes for you. When you are done, click back to “Edit HTML” mode and copy the entire table code. Under Template -> Page Elements -> Add a Page Element -> HTML/JavaScript, paste this code (with all the style definitions) and save.
Table with Header
The code for the above table is this:-
Note:
1. The <th> tags are used to mark the content as headers and such text will be bold by default to distinguish them from the other contents. We intentionally included more rows and columns to let you see how you can insert more rows using the <tr> tags and more data cells using the <td> tags.
Row Span and Column Span
Sometimes, you may want to merge certain cells, such that the cell spans multiple rows or columns like this:-
The code for the above table is this:-
Note:
1. For the top row, we merged 3 columns and named it “Menu”. In the <td> tag, we have therefore inserted a colspan="3" to indicate that the word spans 3 columns.
2. In the left column, we wanted the word “Starters” to span 2 rows, and have inserted rowspan="2" into the <td> tag.
3. Similarly, to have the word “Main” span 3 rows, we inserted rowspan="3" into the <td> tag.
Border Color, Background Color, Background Images
Let us now insert some colors into our table code.
The above table HTML code is this:-
Note:
1. We have added a bordercolor to the table. Take a look at our Hexadecimal HTML Color Codes article for more color choices and the codes to use.
2. To add a background color to a cell, insert the bgcolor definitions.
3. Should you like, you can have a background image instead of color as we have done in the above “Videos” cell. Upload the image onto a free server and insert the relevant URL of that image.
4. In the bottom right cell, we have inserted an image rather than text, to show you how an image can be inserted into a table.
Alternative Method
We end this part of our introductory article on HTML table codes with an alternative method to insert tables into Blog posts. If you have a word processor - MS Word, OpenOffice writer, etc. - you can create a number in the processor. Format it, enter your text and when it is done, block copy the entire table. Go to your New Post and under “Compose” mode, paste the table.
When you view the post in “Edit HTML” mode, you can see the table code similar to what we have discussed above. While this method of inserting a table is easy for the layman, the final code may be cluttered with other styles and definitions that are brought over from the word processor. If you'd like, create a simple table using your word processor but use the Blogger text editor to format the fonts, colors and alignment. To insert background colors and images, it is still advisable to follow the above guide.
Remove White Spaces
You may see a lot of white space or gap at the top of the table. To remove this unnecessary space, you would need to compact the code and remove the line breaks. We have used a lot of line breaks in the above code so that you can better understand how the code works. Take the first example of a Basic Table, compacting the code will mean removing all the new line breaks like this:-
Most of us would have either used or come across tables that display data or information. If you have used word processor or spreadsheet softwares, you should be familiar with these terms, which apply as well to our discussion here:-
“row” - a horizontal line of units
“column” - a vertical line of units
“cell” - each unit or data compartment enclosed by the borders
Let us look at some examples to illustrate how the HTML table codes work and where you can place them.
Placement of the Table Code
To create a table in a Blog post, simply type in the HTML codes (mentioned below) when you are writing your post. See that you are in “Edit HTML” mode rather than “Compose” mode when the code is inserted.
If you want the table to be displayed in your sidebar or elsewhere in your template, go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript” to paste the code.
Basic Table
| Height: | 2.2m |
| Weight: | 185kg |
The HTML for the above table is this.
<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody> <tr> <td>Height:</td> <td>2.2m</td> </tr> <tr> <td>Weight:</td> <td>185kg</td> </tr> </tbody> </table> |
|---|
Note:
1. It should begin with a <table> tag and end with a closing </table> tag.
2. We have specified the border as 1px. You can set it to “0” to have no visible border or set it to any other value.
3. Try to specify a width at all times. This improves the speed of page loads since the browser would be able to set aside the space required for the table. When you view your template source code, the width allocated for your Blog posts should be found under #main or #main-wrapper and your table width will have to be less than that. If you do not set a width, the table will by default take up the full width.
4. The cellpadding is the amount of white space between the content and the borders. If there is no cellpadding, you will find the text very close to the border.
5. Cellspacing is used to define the distance between each cell.
6. Every row starts with a <tr> tag and ends with a </tr> tag. In this example, we have 2 rows, the portion colored blue being the first row, and the portion colored red being the second row.
7. Within every row, we have the contents governed by the <td> (table data) tags. You would notice that in the first row, the first data cell “Height:” begins with <td> and ends with </td>. Every data cell will have to be enclosed within such tags.
8. The contents in each data cell need not be plain text. You can insert pictures, images, links, videos, etc. For instance, we could replace “Height:” with a picture code that looks like this “<img src="Image URL" />” to insert a picture that we have uploaded onto a photo server. For more on the links and image codes to insert, you may refer to our guide at Hyperlinks and Image Links.
Text Formatting
You may want to change the text font face, font-size or color and make the text bold or italic. You can even align the text either to the left, center or right of the cell. We'll suggest a method that is easy for all of us to adopt, without having to learn complicated style codes. Create a new draft post. Choose “Edit HTML” mode and paste the above table code. Now, view the post under “Compose” mode. Using the rich-text editor, change the font, color and alignment to whatever you like. All the style codes will be automatically inserted and what-you-see-is-what-you-get.
If you want the table in your sidebar, do the same, create the table in a draft post and use the rich-text editor to insert the style codes for you. When you are done, click back to “Edit HTML” mode and copy the entire table code. Under Template -> Page Elements -> Add a Page Element -> HTML/JavaScript, paste this code (with all the style definitions) and save.
Table with Header
| S/No. | Inventory | Qty |
|---|---|---|
| 1. | Plate | 50 |
| 2. | Cup | 22 |
| 3. | Bowl | 30 |
The code for the above table is this:-
<table border="1" cellpadding="1" cellspacing="0" width="200"><tbody> <tr> <th>S/No.</th> <th>Inventory</th> <th>Qty</th> </tr> <tr> <td>1.</td> <td>Plate</td> <td>50</td> </tr> <tr> <td>2.</td> <td>Cup</td> <td>22</td> </tr> <tr> <td>3.</td> <td>Bowl</td> <td>30</td> </tr> </tbody> </table> |
|---|
Note:
1. The <th> tags are used to mark the content as headers and such text will be bold by default to distinguish them from the other contents. We intentionally included more rows and columns to let you see how you can insert more rows using the <tr> tags and more data cells using the <td> tags.
Row Span and Column Span
Sometimes, you may want to merge certain cells, such that the cell spans multiple rows or columns like this:-
| Menu | ||
| Starters | Salad | $1.00 |
| Soup | $2.00 | |
| Main | Fish | $3.00 |
| Chicken | $4.00 | |
| Lamb | $5.00 | |
The code for the above table is this:-
<table border="1" cellpadding="0" cellspacing="0" width="300"><tbody> <tr> <td colspan="3">Menu</td> </tr> <tr> <td rowspan="2">Starters</td> <td>Salad</td> <td>$1.00</td> </tr> <tr> <td>Soup</td> <td>$2.00</td> </tr>> <tr> <td rowspan="3">Main</td> <td>Fish</td> <td>$3.00</td> </tr> <tr> <td>Chicken</td> <td>$4.00</td> </tr> <tr> <td>Lamb</td> <td>$5.00</td> </tr> </tbody> </table> |
|---|
Note:
1. For the top row, we merged 3 columns and named it “Menu”. In the <td> tag, we have therefore inserted a colspan="3" to indicate that the word spans 3 columns.
2. In the left column, we wanted the word “Starters” to span 2 rows, and have inserted rowspan="2" into the <td> tag.
3. Similarly, to have the word “Main” span 3 rows, we inserted rowspan="3" into the <td> tag.
Border Color, Background Color, Background Images
Let us now insert some colors into our table code.
| Music | Videos |
| Games |  |
The above table HTML code is this:-
<table border="1" bordercolor="#ff3366" cellpadding="0" cellspacing="0" width="200"> <tbody> <tr> <td bgcolor="#33ffcc">Music</td> <td background="http://www.blogpulp.com/imagehost/images/381245101.jpg">Videos</td> </tr> <tr> <td bgcolor="#ff66cc">Games</td> <td><img src="http://www.blogpulp.com/imagehost/images/236728310.jpg" /></td> </tr> </tbody> </table> |
|---|
Note:
1. We have added a bordercolor to the table. Take a look at our Hexadecimal HTML Color Codes article for more color choices and the codes to use.
2. To add a background color to a cell, insert the bgcolor definitions.
3. Should you like, you can have a background image instead of color as we have done in the above “Videos” cell. Upload the image onto a free server and insert the relevant URL of that image.
4. In the bottom right cell, we have inserted an image rather than text, to show you how an image can be inserted into a table.
Alternative Method
We end this part of our introductory article on HTML table codes with an alternative method to insert tables into Blog posts. If you have a word processor - MS Word, OpenOffice writer, etc. - you can create a number in the processor. Format it, enter your text and when it is done, block copy the entire table. Go to your New Post and under “Compose” mode, paste the table.
When you view the post in “Edit HTML” mode, you can see the table code similar to what we have discussed above. While this method of inserting a table is easy for the layman, the final code may be cluttered with other styles and definitions that are brought over from the word processor. If you'd like, create a simple table using your word processor but use the Blogger text editor to format the fonts, colors and alignment. To insert background colors and images, it is still advisable to follow the above guide.
Remove White Spaces
You may see a lot of white space or gap at the top of the table. To remove this unnecessary space, you would need to compact the code and remove the line breaks. We have used a lot of line breaks in the above code so that you can better understand how the code works. Take the first example of a Basic Table, compacting the code will mean removing all the new line breaks like this:-
<table width="200" border="1" cellspacing="2" cellpadding="2"><tbody> <tr><td>Height:</td><td>2.2m</td></tr><tr><td>Weight:</td><td>185kg</td></tr></tbody></table> |
|---|
posted by Computer @ 11:22,
