Thursday 5 June 2014

HTML Tables & Nesting of Table

   
HTML Tables:
—  Tables are very useful to arrange in HTML and they are used very frequently by almost all web developers. Tables are just like spreadsheets and they are made up of rows and columns.
—  You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is written out row by row. A row is contained inside a <tr> tag . which stands for table row. And each cell is then written inside the row element using a <td> tag . which stands for table data.

html>
<head>
<title>HTML TABLE</title>
</head>
<body>
<table border="5" height="500px" width="800px" bordercolor="#CC6699">
<caption>Employees</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
<tr>
<td align="center">Ramesh Raman</td>
<td>&nbsp;</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Cell Spacing & Cell Padding:
—  Cell spacing specifies the space between the cells.
—  Cell padding specifies the space between the cell content and its borders.

<html>
<head>
<title>HTML TABLE</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Colspan and Rowspan Attributes:
—  You will use colspan attribute if you want to merge two or more columns into a single column.
—  Similar way, you will use rowspan if you want to merge two or more rows.

<html>
<head>
<title>ROWSPAN AND COLSPAN</title>
</head>
<body>
<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>
</body>
</html>

Nested Table:

<html>
<head>
<title>HTML TABLE</title>
</head>
<body>
<table border="1">
<tr>
<td>
    <table border="1">
      <tr>
         <th>Name</th>
         <th>Salary</th>
     </tr>
     <tr>
         <td>Ramesh Raman</td>
         <td>5000</td>
    </tr>
    <tr>
         <td>Shabbir Hussein</td>
         <td>7000</td>
    </tr>
    </table>
</td>
<td> 
    <ul>
    <li>This is another cell</li>
    <li>Using list inside this cell</li>
    </ul>
</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>