In this article, we shall learn how to create tables in our Blog
posts or as 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 CodeTo
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.
<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,
Text FormattingYou
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 SpanSometimes, 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 ImagesLet 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 MethodWe
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 SpacesYou
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>
|
|---|
You've successfully verified http://bikes.bloggerstop.net/.
