07 March 2013

TAble



How to do tables



C reating tables is not as hard as one may think. Once you know the basic codes you will only need to fill in the blanks. After you have learned how to use the basic tags then you should go on to learn some of the more advanced tags. These will help you change the size of your table, the amount of space around your text and many other things. Here is a listing of the most basic codes that you need to create a very simple table.

The basic elements of tables are:

<table> - start the table.

</table> - end the table.

<tr> - Basically, this is you need to use to start a new line on your table.

</tr> - This is basically what you need to end a line on your table.

<td> - This is the code that starts one group of text inside your table.

</td> - This is the code that ends your group of text.


We’ll go through how to construct tables in HTML, including a few useful tricks.

Example table HTML

Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Code:


<table>
<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>
</table>


In the first part of this lesson you learned how to create a basic table. Now you will learn to add a few simple codes to your table to make it look better on your page.

To give the table borders just add the BORDER attribute to the <TABLE ...> tag:

<table border>
BORDER sets the width of the outer border. So, for example, this code creates a table with an outside border width of 10:

CELLSPACING
sets the amount of space between the cells of a table. If the borders are visible, CELLSPACING controls the width of the internal borders.

CELLSPADDING
The cellpadding tag is used to create space between the text inside your table and the border surrounding that text. The code for the cellpadding tag goes inside the table tags and will look like this:

<table border="0" cellspadding="10">

for example:
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Code:


<table border="2" cellspacing="10">
<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>
</table>


caption

The caption tags will serve as a title or explanation and show up at the top of the table.

The code for the caption goes after the table code and looks like this:

This is the caption
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Code:


<table border="2" cellspacing="10">
<caption>This is the caption</caption>
<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>
</table>


Background Color

The bgcolor tag will change the color of the background inside your table.
The code for the bgcolor tag goes inside the table tags and will look like this:

Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Code:

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</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>
</table>


Tricks


Alternating Table Row Colors:

This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!
This Row is Yellow!
This Row is Gray!


Code:

<table>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
</table>


Table Border Color

The border color tag will change the color of the border around your table.

Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2

Code:

<table border="5" bordercolor="black" bgcolor="pink" cellspacing="10">
<tr>
<td>Column 1>/td>
<td>Column 2>/td>
</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>
</table>


Table image Background:

The background code allows you to change the background inside your table to that of an image of your choice.
at last After hours upon hours of making a way plus trial and error, I finally work this on ffs.

Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2


Code:

<table border="2" cellspacing="10" style="background-image: url(table bgimage URL);">
<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>
</table>


Borders on Table Cells

To the table cells within the table, you need to apply the border code against the individual table cells.

Column 1Column 2
row 1 cell 1row 1 cell 1
row 2 cell 2row 2 cell 2


Code:

<table cellspacing="10" style="border:2px solid black;">
<tr>
<th style="border:2px solid red;">HEader</th><th style="border:2px solid red;">header
</th>
</tr>
<tr>
<td style="border:2px solid red;">row 1cell1</td><td style="border:2px solid red;">row 1cell1</td>
</tr>
<tr>
<td style="border:2px solid red;">row2 cell2</td><td style="border:2px solid red;">row 2cell2</td>
</tr>
</table>


Table Height & weight

The width tag will define the how wide cells should be.
The height tag will define the minimum height of the cells of the table.

Row 1 Cell 1Row 1 Cell 2
Row 2 Cell 1Row 2 Cell 2


Code:

<table border="2" cellspacing="10" width="350" height="175">
<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>
</table>


Table Border

This is like the Example above, but there's no border in the table cell
You can also change the border style to thick, dotted, dashed,

Table HeaderTable Header
Table cell 1Table cell 2
Table cell 3Table cell 4


Code:

<table style="border:3px dashed blue;">
<tr>
<th>Header</th><th> Header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 1</td>
</tr>
<tr>
<td>Table cell 2</td>Table cell 2</td>
</tr>
</table>




- Comments

No comments:

Post a Comment