Using Tables>>Table Row Span - (PART_27)

Topic:  I want a table where one my column will be of 2 rows wide while others are as usual?                 How to span the column rows in html tables?

Explanation:

Row Span
While using table, it will be need of time that some of our columns should be spanning across few rows. It can be easily achieved by using row span. 

For example we have a table with three rows and three columns. Now I want the second column to be of two rows height.

Demo:

First Row . . second Row 2 2 Third Row 3 3	First Row spanned . second Row 2 Third Row 3 3
Table	Spanned Table

Here we have spanned one of the column in to two rows. It is done using the attribute rowspan="x". In this case, as the column should be spanned to two rows we will be adding a attribute "rowspan=2".

As we have spanned a column in first row to two rows, we should add only two columns in second row, as one more column will be spanned from first row. 

Tag:
<table>
<tr><td>First Row</td> <td rowspan=2> spanned </td> <td> . </td></tr>
<tr><td>second Row</td><td> 2 </td></tr>
<tr><td>Third Row</td><td> 3 </td><td> 3 </td></tr>
</table>

Read More

Using Tables>>Table Col Span - (PART_26)

Topic:  I want a table where one of my row will have only 2 columns while others have 5 columns?  How to span the columns in html tables?

Explanation:

Col Span: While using table, it will be need of time that some of our rows should have lesser columns then others. It can be easily achieved by using colspan. 

For example I have a table with two rows and three colums. Now I want the first row to be of one column and the second to be of three columns.

Demo:

First Row . . second Row 2 2	First Row second Row 2 2
Table	Spanned Table

Here we have spanned one of the column to three columns. That is instead of adding three columns we will add only one column and span it using the attribute colspan="x". In this case as the column should be spanned to three we will be adding an attribute "colspan=3". 

Tag:

<table>
<tr>
<td colspan=3>
First Row</td>
</tr>
<tr>
<td>
Second Row
</td>
<td >.</td>
<td>2</td>
</tr>
</table>

Read More

Using Tables >> Inner Tables - (PART_25)

Topic:  How to create tables inside table columns?  How to control space between table cells?

Explanation:

Table inside table: Many a times we will be using table inside tables Now we will create two row with three columns. The 2nd row, 2nd column will be split again to a table with two rows, two cols. Also we will be using the attributes cellpadding and cellspacing to handle table space. 

Example Code:
<table border=1 width=80% height=30% align=center cellpadding=1 cellspacing=1>
<tr height=30%>
<td>
First Row
</td>
<td>
First Row
</td>
<td>
First Row
</td>
</tr>
<tr height=70%>
<td>
Second Row
</td>
<td >

<table bgcolor=yellow border=1 width=80% height=80%>
<tr >
<td> Inner Table </td>
<td> Inner Table </td>
</tr>
<tr >
<td> Inner Table </td>
<td> Inner Table </td>
</tr>
</table> 
</td>
<td>
Second Row
</td>
</tr>
</table>


Result:

First Row	First Row	First Row
Second Row	Inner Table Inner Table Inner Table Inner Table	Second Row

Cellpadding and Cellspacing: The space and padding can be controlled by using the attributes cellpadding and cellspacing.

Usage:

<table border=0 bgcolor="#776655" width=80% height=150 align=center cellpadding=0 cellspacing=0> 

The above table can be made more elegant by changing the colors and borders and controlling cellspacing and cellpadding.

Result:

First Row	First Row	First Row
Second Row	1 2 3 4	Second Row

Read More

Using Tables Table Alignment Code- (PART_24)

Topic:  How to align table? How to position text inside rows and columns?

Explanation:

Table Alignment: Tables can be aligned to the left/right/center using the attribute "align" inside table tag. 

Example Code:
<table border=1 bgcolor="green" width=300 height=100 align=center>
<tr height=30>
<td>
HAI
</td>
<td>
Hello
</td>
</tr>
<tr height=70>
<td>
Table Alignment
</td>
<td background="./test.jpg">
This is 2nd row 2nd column <br><br> Nice background 
</td>
</tr>
</table>


Result:

HAI	Hello
Table Alignment	This is 2nd row 2nd column Nice background

Aligning Content (text) in columns: The content (text,image,etc..) inside the columns can be aligned horizontally using the tag attribute "align".The content (text,image,etc..) inside the columns can be aligned vertically using the tag attribute "valign"

ALIGN can take the values as LEFT/RIGHT/CENTER
VALIGN can take the values as TOP/BOTTOM/CENTER

Example Code:

<table border=1 bgcolor="green" width=80% height=30%ALIGN=center>
<tr height=20%>
<td align=center>
center
</td>
<td align=right>
right
</td>
</tr>
<tr height=70% >
<td valign=top>
top
</td>
<td valign=bottom align=right background="./test.jpg">
Bottom <br><br> 
</td>
</tr>
</table>


Result:

center	right
top	bottom right

Read More

Using Tables >> HTML Table Size - code - (PART_23)

Topic:  How to create table with different size? How to split the size of the table columns?

Explanation:

Table Size: We can set the size of the table based of pixels or percentage. First we will see how to set size based on pixels. The attribute width and height will be used. 

Example Code:
<table border=1 bgcolor="green" width=300 height=100>
<tr height=30>
<td>
This is 1st row 1st column
</td>
<td>
This is 1st row 2nd column
</td>
</tr>
<tr height=70>
<td>
This is 2nd row 1st column
</td>
<td background="./test.jpg">
This is 2nd row 2nd column <br><br> Nice background 
</td>
</tr>
</table>

Now we have set the total table width as 300 and height as 100 and split them as 30 to first row and 70 to second row.

Result:

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column Nice background

Table Size in percentage: Table width and height can be set using percentage.
e.g: width=60%.This means that the table with be drawn to 60% width of the current component.

i.e. if we are drawing a table inside a body tag and using width as 100%, then the width of the table will be equal to the browser width.
Table can be drawn inside tables. We will see about it later.

Example Code:
<table border=1 bgcolor="green" width=80% height=20%>
<tr height=30%>
<td>
This is 1st row 1st column
</td>
<td>
This is 1st row 2nd column
</td>
</tr>
<tr height=70%>
<td>
This is 2nd row 1st column
</td>
<td background="./test.jpg">
This is 2nd row 2nd column <br><br> Nice background 
</td>
</tr>
</table>

Now we have set the total table width as 80% and height as 30% and split the height as 30% to first row and 70% to second row.
To explain in depth, say we have the component size as width=500,height=500 so the table will now take 80% of 500 (400) as its total width and 30% of 500 (150) as its total height. Then it will split that 150 height in to 30% for first row and 70% for second row.

Result:

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column Nice background

Read More

Using Tables >>Table Background Color and Image - (PART_22)

Topic:  How to set background color for table?  Setting background image for table?

Explanation:

Table with color: We can add background color to the table using the attribute "bgcolor".
This attribute can be added in "table"/"tr"/"td" tag. The color can be set on the whole to table or to rows and column 

Example Code:
<table border=1 bgcolor="green">
<tr>
<td>
This is first column
</td>
<td bgcolor="yellow">
This is second column
</td>
</tr>
</table>

Result:
The result for above tag will be as

This is first column

This is second column

Table with background image: Now we will try to create a table with one column having a background image 

Example Code:
<table border=1 bgcolor=green>
<tr>
<td>
This is 1st row 1st column
</td>
<td>
This is 1st row 2nd column
</td>
</tr>
<tr>
<td>
This is 2nd row 1st column
</td>
<td background="./test.jpg">
This is 2nd row 2nd column <br><br> Nice background 
</td>
</tr>
</table>

Result:
The result for above tag will be as

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column Nice background

Read More

Using Tables >> HTML Table Border - (PART_21)

Topic:  How to set border around table?

Explanation:

Table with border: To make things much clear, we will put border to the table using the attribute "border".This attribute should be added in "table" tag. 

Example Code:
<table border=1>
<tr>
<td>
This is first column
</td>
<td>
This is second column
</td>
</tr>
</table>

Result:

The result for above tag will be as

This is first column

This is second column

Table with 2 row 2 col
Now we will try to create a table with 2 row and 2 cols each 

Example Code:

<table border=1>
<tr>
<td>
This is 1st row 1st column
</td>
<td>
This is 1st row 2nd column
</td>
</tr>
<tr>
<td>
This is 2nd row 1st column
</td>
<td>
This is 2nd row 2nd column
</td>
</tr>
</table>

Result:

The result for above tag will be as

This is 1st row 1st column	This is 1st row 2nd column
This is 2nd row 1st column	This is 2nd row 2nd column

Read More

Using Tables>> Creating HTML Table - (PART_20)

Topic: Creating html tables!

Explanation: Table is most beautiful concept in html.Now a days, most of the websites are created using table structure.The concept of table is very simple, just rows and columns.We will split the window in to so many number of rows and columns as required.

Table
This tag can not act alone. It needs "tr" and "td" tags with in it.

Example Code:

<table> </table>
As we know that table is a set of rows and columns, we introduce rows inside the table using <tr> </tr>. Also each row can have any number of columns. one to n..., so we introduce columns inside the rows using the tags <td> </td> 

So putting things together we define a table with a row and column as follows

Code:
<table>
<tr>
<td> This is first column</td>
</tr>
</table>
Result:

The result for above tag will be as

This is first column

Now we will create a table with one row and two columns

Code: <table>
<tr>
<td> This is first column </td>
<td> This is second column </td>
</tr>
</table>
Result:

The result for above tag will be as

This is first column

This is second column

Read More