Web Development with Khuram: 2014

Table:

A table can be inserted in a webpage to show the data in a tabular form. In the past, table has been used to layout the webpage. This was not a good practice. You'll read later about Webpage Layouts, Here, you can learn to perform the following operations while working with tables:

Insert a Table
Insert a Row
Insert a Heading Row
Insert a Column
Merge Columns
Merge Rows

Insert a Table:

<table></table> Element is used to insert a table in a webpage. It only declare a table but you can't see any table without using some other elements like, <tr></tr>, <th></th> and <td></td>, which are always used within <table></table> Element .

Important Attributes of <table> tag:

Border:: This attribute is used to determine whether the border around the table should be displayed or not. It takes a value of '0' or '1'.
Width:: This attribute determines the width of the table in pixels or percentage. In the first example, given below, width is 100% which means that the table will be displayed as widen as the available space.
Cell Spacing:: Put some space between the cells of table i.e. cellspacing="3".
Cell Padding:: Put some space between the border of each cell and its data i.e. cellpadding="5".

Insert a Row:

<tr></tr> Element is used to insert a row in a table. This element is used inside the <table></table> Element and can contain either <th></th> Element or <td></td> Element.

Important Attributes of <tr> tag:

rowspan:: To merge tow or more rows rowspan attribute is used with an integer value which shows the number of rows to be merged.

Insert a Heading:

<th></th> Element is used to insert Table Headings, usually, appearing as a top most row.This element is used with in the <tr></tr> Element.

Insert a Column:

<td></td> Element is used to insert a column (or a cell by intersecting a row and a column) in a table. This element is used with in the <tr></tr> Element and contains the data to be displayed in a table's cell.

Important Attributes of <td> tag:

colspan:: To merge tow or more columns colspan attribute is used with an integer value which shows the number of columns to be merged.

Table with 100% width and Cellpadding & Cellspacing 0:

Exemplary Code:

<table border="1" width="100%">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th>
        <th>T Heading 3</th>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>1</sub></td>
        <td>C<sub>2</sub>, R<sub>1</sub></td>
        <td>C<sub>3</sub>, R<sub>1</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>2</sub></td>
        <td>C<sub>2</sub>, R<sub>2</sub></td>
        <td>C<sub>3</sub>, R<sub>2</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>3</sub></td>
        <td>C<sub>2</sub>, R<sub>3</sub></td>
        <td>C<sub>3</sub>, R<sub>3</sub></td>
    </tr>
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
C₁, R₁	C₂, R₁	C₃, R₁
C₁, R₂	C₂, R₂	C₃, R₂
C₁, R₃	C₂, R₃	C₃, R₃

C for Column. R for Row.

Table with 50% width and Cellpadding & Cellspacing 10:

Exemplary Code:

<table border="1" width="50%" cellspacing="10" cellpadding="10">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th>
        <th>T Heading 3</th>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>1</sub></td>
        <td>C<sub>2</sub>, R<sub>1</sub></td>
        <td>C<sub>3</sub>, R<sub>1</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>2</sub></td>
        <td>C<sub>2</sub>, R<sub>2</sub></td>
        <td>C<sub>3</sub>, R<sub>2</sub></td>
    </tr>
    <tr>
        <td>C<sub>1</sub>, R<sub>3</sub></td>
        <td>C<sub>2</sub>, R<sub>3</sub></td>
        <td>C<sub>3</sub>, R<sub>3</sub></td>
    </tr>
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
C₁, R₁	C₂, R₁	C₃, R₁
C₁, R₂	C₂, R₂	C₃, R₂
C₁, R₃	C₂, R₃	C₃, R₃

C for Column. R for Row.

Example of Merging Columns (Cells Horizontally):

Exemplary Code:

<table border="1">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th> 
        <th>T Heading 3</th> 
    </tr&gt    
    <tr&gt
        <td colspan="2">C<sub>1&lt/sub> & C<sub>2&lt/sub> are merged, R<sub>1&lt/sub></td>
        <td>C<sub>3&lt/sub>, R<sub>1&lt/sub></td>
    </tr>
    <tr>
        <td>C<sub>1&lt/sub>, R<sub>2&lt/sub>
        <td colspan="2"&gtC<sub>2&lt/sub> & C<sub>3&lt/sub> are merged, R<sub>2&lt/sub></td>
    </tr&gt
    <tr&gt
     <td colspan="3">C<sub>1&lt/sub>, C<sub>2&lt/sub> & C<sub>3&lt/sub> are merged, R<sub>3&lt/sub>.</td>
    </tr&gt
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
C₁ & C₂ are merged, R₁		C₃R₁
C₁R₂	C₂ & C₃ are merged, R₂
C₁, C₂ & C₃ are merged, R₃.

C for Coloumn. R for Row.

Example of Merging Rows (Cells Vertically):

Exemplary Code:

<table border="1" width="80%">
    <tr>
        <th>T Heading 1</th>
        <th>T Heading 2</th>
        <th>T Heading 3</th>
    </tr>
    <tr>
        <td rowspan="2"> In C<sub>1 </sub>, R<sub>1</sub> & R<sub>2</sub>are merged, </td>
        <td>C<sub>2</sub>, R<sub>1</sub></td>
        <td>C<sub>3</sub>, R<sub>1</sub></td>
    </tr>
    <tr>
        <td>C<sub>2</sub>, R<sub>2</sub></td>
        <td rowspan="2"> In C<sub>3</sub>, R<sub>2</sub> & R<sub>3</sub>are merged, </td>
    </tr>
    <tr>
        <td>C<sub>1, </sub>R<sub>3</sub></td>
        <td>C<sub>2</sub>, R<sub>3</sub></td>
    </tr>
</table>

Example Result:

T Heading 1	T Heading 2	T Heading 3
In C₁, R₁ & R₂are merged,	C₂, R₁	C₃, R₁
In C₁, R₁ & R₂are merged,	C₂, R₂	In C₃, R₂ & R₃are merged,
C_1,R₃	C₂, R₃	In C₃, R₂ & R₃are merged,

C for Column. R for Row.

Web Development with Khuram

Pages

Friday 28 February 2014

Tables

Table:

Insert a Table:

Important Attributes of <table> tag:

Insert a Row:

Important Attributes of <tr> tag:

Insert a Heading:

Insert a Column:

Important Attributes of <td> tag:

Table with 100% width and Cellpadding & Cellspacing 0:

Table with 50% width and Cellpadding & Cellspacing 10:

Example of Merging Columns (Cells Horizontally):

Example of Merging Rows (Cells Vertically):

Definition Lists

Definition List:

Example of Unordered List of Type Disc: