HTML Tables are much more used in web designing. Tables are needed to do any design in web. Here you will learn how to draw a single bordered, coloured beautiful table. It can expand dynamically with screen width.
It is quite easy to draw an HTML table as shown below but it is very lower in standard. We never need a Table with its borders are double lined, we need to make a single lined - HERE is an example, Example II.
Remember one thing if you are adding thins code to blogger Post/ Page Editor you should copy this code to the HTML of the post and then switch to the Compose mode, now you can see your table is drawn.
The examples which I have given above are our two posts, in which you can see the bordered are collapsed and and the border and the written text in side do not come to contact any way, but meanwhile observe the below one!, what you see the letters touch the border and it is too bore to see and it may drive away your readers attention.
Below is the code for drawing the above Table.
If you want to add a Raw into the Table, just copy the blue highlighted code and paste just after the copied code, now you can see a new column at the header part has been added. We want the column drawn below the heading too, so Copy the Yellow Highlighted code just after the copied code. Continue the process as much you want.
If you want to increase the thickness of the outer border you can simply change the value in the above code to 2, 3 etc. [ Eg: <table border -"2"]
The Final code will look like this. The edited codes are highlighted.
The result will be like this.
The Result will be :
It is quite easy to draw an HTML table as shown below but it is very lower in standard. We never need a Table with its borders are double lined, we need to make a single lined - HERE is an example, Example II.
Remember one thing if you are adding thins code to blogger Post/ Page Editor you should copy this code to the HTML of the post and then switch to the Compose mode, now you can see your table is drawn.
The examples which I have given above are our two posts, in which you can see the bordered are collapsed and and the border and the written text in side do not come to contact any way, but meanwhile observe the below one!, what you see the letters touch the border and it is too bore to see and it may drive away your readers attention.
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
Below is the code for drawing the above Table.
<div>
<table border ="1">
<tbody><tr>
<th>Header 1</th><th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr></tbody>
</table>
</div>
<table border ="1">
<tbody><tr>
<th>Header 1</th><th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td><td>row 1, cell 2</td>
</tr></tbody>
</table>
</div>
If you want to increase the thickness of the outer border you can simply change the value in the above code to 2, 3 etc. [ Eg: <table border -"2"]
The Final code will look like this. The edited codes are highlighted.
<div>
<table border ="2">
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</tbody>
</table>
</div>
<table border ="2">
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</tbody>
</table>
</div>
The result will be like this.
| Header 1 | Header 2 | Header 2 |
|---|---|---|
| row 1, cell 1 | row 1, cell 2 | row 1, cell 2 |
Create a Professional Looking Single Bordered Table
Now we can make it very professional looking one with collapsed border and the header are colored. For making the border single lined and make the letter a little separated from the outer line. Use Below code. The additional codes are highlighted with yellow mark.
<div dir="ltr" style="text-align: left;" trbidi="on">
<table border="1" cellpadding="8" class="_3p9" style="border-collapse: collapse; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; word-wrap: normal;">
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody></table>
</div>
<table border="1" cellpadding="8" class="_3p9" style="border-collapse: collapse; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; margin-top: 1em; word-wrap: normal;">
<tbody>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</tbody></table>
</div>
The Result will be :
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
Adding Colors to the Table or individual cells
We have done almost in HTML table creation, Now we are going to fill colors in selected cells in the table or for a single Raw or in a Single Column or the Whole Table or the Header only. You can do it easily. Read more.
...
0 comments:
Post a Comment