How to Polish the Table for Your Website in HTML
First of all, create a basic table layout to work on.,Save the file as Table1.html , Open Table1 in your browser and your table will be displayed in the basic form: , Now, let's start editing., Adjusting the space between cells by adding cellpadding...
Step-by-Step Guide
-
Step 1: First of all
Just open Notepad and copy the following code: ,,, Keep Notepad file with html code open, we will edit one thing a time by editing the code. ,, Simply add the width attribute to your code:
You can do it in either percentage or pixel width.
In this example it is a set width of 600 pixel, and it will not change depending on the screen size.
If you set it in percentage width, it would adjust to the screen size automatically. , If you don't want your columns to be the same width, you cane set the width values separately for each column.
This is what you achieve by changing both widths: , Just add the height command to the table tag.
The height of rows will adjust evenly.
The effect is shown below. , Notice, that only Table Title has already been centered by the align attribute.
The content in the rest of cell is left aligned by default.
Add the align attribute to all cells by updating the code as shown below: , By default all the content in cells is vertically centered.
Sometimes, however you might prefer to have it aligned from the top.
In our example, we have done for our 2 center and right column.
Just add the align attribute in appropriate cells as follows:
Your horizontally and vertically aligned table will look like that: , First, let's change the background colour, by including bgcolor command in Table Title cell: , In our example first column has a different colour then the other two: , -
Step 2: create a basic table layout to work on.
-
Step 3: Save the file as Table1.html
-
Step 4: Open Table1 in your browser and your table will be displayed in the basic form:
-
Step 5: let's start editing.
-
Step 6: Adjusting the space between cells by adding cellpadding and cellspacing commands to your code as follows: cellpadding - increases a vertical dimensions of cells; cellspacing - increases the border around the cells; The result is shown below:
-
Step 7: Specify the width of the table.
-
Step 8: Specify the width of columns
-
Step 9: by setting the value on your data cells tag (td): In previous step the width of the columns adjusted evenly.
-
Step 10: Specify the height of the table.
-
Step 11: Center the data in cell.
-
Step 12: Align the content vertically.
-
Step 13: Add colour to your table.
-
Step 14: Analogically set the background colour for rest of your cells.
-
Step 15: Save your file as html again
-
Step 16: open it in browser and you can view your project ready!
Detailed Guide
Just open Notepad and copy the following code: ,,, Keep Notepad file with html code open, we will edit one thing a time by editing the code. ,, Simply add the width attribute to your code:
You can do it in either percentage or pixel width.
In this example it is a set width of 600 pixel, and it will not change depending on the screen size.
If you set it in percentage width, it would adjust to the screen size automatically. , If you don't want your columns to be the same width, you cane set the width values separately for each column.
This is what you achieve by changing both widths: , Just add the height command to the table tag.
The height of rows will adjust evenly.
The effect is shown below. , Notice, that only Table Title has already been centered by the align attribute.
The content in the rest of cell is left aligned by default.
Add the align attribute to all cells by updating the code as shown below: , By default all the content in cells is vertically centered.
Sometimes, however you might prefer to have it aligned from the top.
In our example, we have done for our 2 center and right column.
Just add the align attribute in appropriate cells as follows:
Your horizontally and vertically aligned table will look like that: , First, let's change the background colour, by including bgcolor command in Table Title cell: , In our example first column has a different colour then the other two: ,
About the Author
Gregory Jones
Experienced content creator specializing in cooking guides and tutorials.
Rate This Guide
How helpful was this guide? Click to rate: