HTML – Tables Tutorial

Tables can be difficult at first, but with a little patience and practice you will see that things are not always how they seem to be. The <table> tag is used to open a table. Within this tag we will find two others typical tags, <tr> (the table lines) and <td> (the table column). But the best explanation is always an example:

HTML
<table border="1">
<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>

Demo

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


The content will be placed within the table’s rows. A row represents what is between <td> and </td>. The border attribute establishes the length of the table’s edge.

HTML – Asymmetrical tables

To form asymmetrical tables we will use ‘rowspan’ to cross more than one line and ‘colspan’ to cross more than one columns. Also, if we want that the first line to serve as titles line for all the columns we will use the <th> tag. These will be written with bold letters as we will see in the following example:

HTML
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>

Demo

COLUMN 1                     COLUMN 2          COLUMN 3
Row 1 Cell 1                    Row 1 Cell 2         Row 1 Cell 3
Row 2 Cell 2                      Row 3 Cell 1                Row 2 Cell 3

HTML – Spacing the cells

With the help of the ‘cellpadding’ and ‘cellspacing’ attributes we will establish the distance between the cells. ‘Cellspacing’ establishes the size of the edge, and ‘cellpadding’ the distance between the edge and the content. In the following example a little bit of color has also been added.

HTML
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 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>
</table>
To better make the difference you can erase the edge from the previous example.

The distance between the cells and the edge’s size will be interpreted in pixels by the browser. Using this ‘law’ a value of 10 means actually 10 pixels. This attribute is not the only one that uses as unit of measure the pixels, but we will learn about the others as we progress through the next tutorials.

Article Source:http://www.techstarcle.com/html-tables-tutorial/

Read More...

HTML Paragraphs

HTML – Paragraphs

 The paragraph is a base element in text editing. The tag for a paragraph is <p>.
He places a empty line above and under the text to make it evident, and the browser will take it as it is.

HTML
<p>The paragraph is a base element in text editing. The tag for a paragraph is &lt;p&gt;.</p>
<p>He places a empty line above and under the text to make it evident, and the browser will take it as it is.</p>
Demo

The paragraph is a base element in text editing. The tag for a paragraph is <p>.

He places a empty line above and under the text to make it evident, and the browser will take it as it is.

HTML – Paragraph, justify

Paragraphs can be edited almost the same easy way as in a text editor. The next example is made with the help of the justify attribute

HTML
<p align="justify">The paragraph is a base element in text editing. The paragraph is a base element in text editing. The tag for a paragraph is <p>. This one places a empty line above and under the text to make it evident, and the browser will take it as it is.</p>
Demo

The paragraph is a base element in text editing. The paragraph is a base element in text editing. The tag for a paragraph is

. This one places a empty line above and under the text to make it evident, and the browser will take it as it is.

HTML – Centered paragraph

HTML
<p align="center">The paragraph is a base element in text editing. The paragraph<br /> is a base element in text editing. The tag for a paragraph is &lt;p&gt;. <br />This one places a empty line above and under the text to make it evident, and the browser will take it as it is.</p>
Demo

The paragraph is a base element in text editing. The paragraph
is a base element in text editing. The tag for a paragraph is <p>.
This one places a empty line above and under the text to make it evident, and the browser will take it as it is.

In this example every line of the paragraph has been centered in the middle of the giving back line.

HTML – The paragraph aligned to the right, right

HTML
<p align="right">The paragraph is a base element in text editing. The paragraph<br />is a base element in text editing. The tag for a paragraph is &lt;p&gt;.<br />This one places a empty line above and under the text to make it evident, and the browser will take it as it is.</p>
All the lines of the paragraph had been arranged, in the upper example, to the right.

Article Source:http://www.techstarcle.com/html-paragraphs/

Read More...

HTML Background Tutorial

Beside a solid color for the background, you might as well use an image. To do this thing follow the example carefully:



<table height="100" width="150" background="/img/image.jpg" >
<tr>
<td>This table has a background image</td>
</tr>
</table>

HTML – Repeated background (tile)

We were lucky in the first example that both the table and the image had the same size. But there are situations where the table is larger than the image, and then the image will multiply itself endlessly.

HTML – Patterned Backgrounds

Repeating an image has got another application as you will see. This browser’s function of repeating the image endlessly can be used as an advantage and that is, we can create a very small image (with the help of Photoshop or any other photo edition software), for example 4×4 pixels. This image can be a certain model that will repeat endlessly and will create a continued shape.

HTML – Transparent background color

Another method of using the repeated image is the transparent background. So prove this we will use a ‘.gif’ image. Placing this image in the background has to be done in the same manner as in the previous example.

Article source: http://www.techstarcle.com/html-background-tutorial/

Read More...