HTML Table

Tables in HTML

Assignment No 7.

Tables may seem difficult at first, but after working through this lesson you'll see how they aren't too bad. The <table> tag is used to begin a table. Within a table element are the <tr> (table rows) and <td> (table columns) tags. Tables are a handy way to create a site's layout, but it does take some getting used to. Here's how to make a table.

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

Output

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

Spanning Multiple Rows And Cells

• Sometimes we may require adding sub columns or sub-rows to categories the information properly. In such case colspan and rowspan can be used.
• The rowspan is used to extend the row vertically and colspan is used to extend the column horizontally.
• When rowspan=2 then the row can be extended vertically by two cells.
•  When colspan=2 then the column can be extended horizontally by two cells.

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

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

Cell Padding and Spacing

With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within

In easy steps -  cell padding allows to have some space between contents of each cell and its border.The distance between each cell can be increased by using cell spacing.

Note : How to avoid confusion between padding and spacing.

Spacing is given from outside whereas padding is done from inside

eg: Space between two people - Spacing.

  

    Baby wearing a pad (diaper) - Padding.

HTML Code:

<table border="1" cellspacing="10" cellpadding=”10”>

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