Saturday, July 15, 2017

Html Tables

Hello guys,morning and welcome to this new tutorial section. In this tutorial am gonna be talking about HTML tables, half of it will be discussed now and the conclusion will be in my next tutorial.

The HTML tables allows web designers to arrange data like text, images, links, other tables, etc. Into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. Here is an example below.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="3">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Here, the border is an attribute of <table> tag and it is used to put a border accross all the cells. If you do not need border, then you can use border="0".
You can try the above code out using your text editor for better understanding and feel free to drop your questions. Now having known that lets move on to the next phase.

Table Heading
Table heading can be defind using <th> tag. This tag willl be put to replace <td> tag,which is used to represent actual data cell. Normally you will put your top row as table heading as shown below

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Header</title>
</head>
<body>
<table border="3">
<tr>
<th>Name</th>
<th>Matric Number</th>
</tr>
<tr>
<td>Nkpara Kennedy</td>
<td>1602062080</td>
</tr>
 <tr>
<td>Bamidele</td>
<td>1602062060</td>
</tr>
</table>
</body>
</html>
Try to practice using your text editor.

Cellpadding and Cellspacing Attribute
There are two attribute called  cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attributs defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell,

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Cellpadding</title>
</head>
<body>
<table border="3" cellpadding="6" cellspacing="8">
<tr>
<th>Name</th>
<th>Matric Number</th>
</tr>
<tr>
<td>Nkpara Kennedy</td>
<td>1602062080</td>
</tr>
 <tr>
<td>Bamidele</td>
<td>1602062060</td>
</tr>
</table>
</body>
</html>
Try to practice using your text editor.

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

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Colspan/Rowspan</title>
</head>
<body>
<table border="3">
<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>
Try to practice using your text editor.

Tables Backgrounds 
You can set table background using one of the following two ways:
    1.    bgcolor attribute - You can set background color for a whole table or for just one cell.

    2.    background attribute - You can also set background image for whole table or just one cell. You can also set border color using bordercolor attribute.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Background</title>
</head>
<body>
<table border="3" bordercolor="blue" bgcolor="red">
<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>

Here is an example of background attribute

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Background</title>
</head>
<body>
<table border="3" bordercolor="blue" background="/images/test.png">
<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>
You can try the above code out using your text editor and feel free to drop your questions.

Table Height and Width 
You can set a table height and width using height and width attributes. You can specify table height or width in terms of pixels or in terms of percentage of available screen area.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables Height and Width</title>
</head>
<body>
<table border="3" width="500"  height="200">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

Alright we gonna stop here for today. We will talk about the conclusion of HTML tables in our next tutorial, bye for now.

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images


Share:

0 comments:

Post a Comment