Democratizing The Internet -- One Blog At A Time™
How To Build A Basic Table : Geeks2020

How To Build A Basic Table

Tables are enormously important online. We can build simple tables while more complex versions can be used to build entire web pages.

In the case of blogs the pages are already built so complex tables are largely unnecessary. What is useful from time to time is build a simple table to drop into a posting or page.

A Simple Table

A table consists of rows that go horizontally across and columns that go vertically up and down. The area where they meet is a cell.

Let’s say that we want to build a table with four rows across and five columns down. We could write out the coding by hand but it’s just as easy to use a bookmarklet that builds tables. Just enter the number of rows and columns desired. When the basic coding appears, copy it and paste it in your posting or page.

Press here for table code builder.

We’ve used the bookmarklet to create the coding for the table we need, four rows across and five columns deep. The coding looks like this:



The result of this coding looks this way.

         
Fish Meat Vegetables Fruit Cereal
Apples Corn Oranges Olives Soy Beans
         

Some Notes

First, we start our table with, of course, a “table” command in brackets at the start and at the end of the table. If the table command is not closed the coding will play havoc with the page. To close a command we use a back slash.

Second, inside the first “table” command we have a “tbody” command and to close we have a “tbody” command before the closing “table” command.

Third, to make rows across we use the “TR” command in brackets. Again, we start with a “TR” command and we must close with a TR command.

Fourth, to create cells we use the “TD” command and close with the “TD” command.

Centering

It’s usually a good idea to center a table within a posting or page. To do this it’s best to take two steps:

First, we want to add a “center” command in brackets before the “table” command and to close the “center” command after the closing “table” command.

Second, we want to change the table coding so that it’s less than the width of the posting area. We can do this by adjusting the width of the table to 90% or 80% or whatever percentage we like by changing the “table” command.

Here’s how the coding and redesigned chart look:



         
Fish Meat Vegetables Fruit Cereal
Apples Corn Oranges Olives Soy Beans
         

Headlines

If you look at the chart you’ll see there two rows of items but also a blank row above and a blank row below. We’ll use these blank rows to create a headline and a source.

First, to create a headline well change the first “TD” to TD colspan=”5″. Why 5? Because in this table we have five rows across.

Second, we’ll get rid of the extra cells in the row.

Third, will use a “strong” command to make our headline blod.

Fourth, we’ll use the “center” command to center our headline.

Fifth, we’ll follow steps one and two to create a credit line at the bottom of the table, We’ll make the term “Source” bold by using the “strong” command.

Here’s how the coding and the chart look:



Yummy Things To Eat
Fish Meat Vegetables Fruit Cereal
Apples Corn Oranges Olives Soy Beans
Source: geeks2020.com

Border

It may happen that you want to add a border around the entire table. The solution is to ad a border command such as border=”1″ to the first table command. Also try with border=”2“, etc.


Yummy Things To Eat
Fish Meat Vegetables Fruit Cereal
Apples Corn Oranges Olives Soy Beans
Source: geeks2020.com

Post a Response

Complete Puzzle To Send: *

*