Posted by
Zhullyblog
on
- Get link
- X
- Other Apps
Hello, welcome to zhullyblog. If this is your first time here , please Subscribe to Zhullyblog by Email to get latest tutorial.
HTML tables
In this post, you will learn to represent data in a tabular form. There are several use of a table. You can use a table to:
• Differentiate between something
• List product and price
• User details and the list goes on.
To create a table in HTML, you make use of the <table> tag. Tables are actually created using rows then the columns are inserted later.
To create the table row, you use the <tr> tag then insert the data using <td>
• <tr> : table row
• <td> : table data.
Wait, I totally forgot about the header. To create a table header you use the <th> tag.
Every table have an header which gives a detailed information about the content in the table.
Now, let's see the code.
At this stage, I expect you to write clean code, please make sure your codes are clean.
Here is how to write HTML code to create a table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
</tr>
<tr>
<td>Vivian</td>
<td>18</td>
<td>Single</td>
</tr>
<tr>
<td>Demi</td>
<td>20</td>
<td>Engaged</td>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>Married</td>
</tr>
<tr>
<td>Angel</td>
<td>19</td>
<td>Null</td>
</tr>
<tr>
<td>Bridget</td>
<td>22</td>
<td>Married</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
</tr>
<tr>
<td>Vivian</td>
<td>18</td>
<td>Single</td>
</tr>
<tr>
<td>Demi</td>
<td>20</td>
<td>Engaged</td>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>Married</td>
</tr>
<tr>
<td>Angel</td>
<td>19</td>
<td>Null</td>
</tr>
<tr>
<td>Bridget</td>
<td>22</td>
<td>Married</td>
</tr>
</table>
</body>
</html>
Result
Well, as you can see, no line seperates the columns. To correct this, you need to add a border attribute.
Just remember, you start with <table> then <tr> then insert the data <td>. As easy as that.
Table border
Tables do not have any border but you can add CSS styling to add a border. As you can see that without a border in the first example, the table looks weird but with a border , it looks good.
Take a look at this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
</tr>
<tr>
<td>Vivian</td>
<td>18</td>
<td>Single</td>
</tr>
<tr>
<td>Demi</td>
<td>20</td>
<td>Engaged</td>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>Married</td>
</tr>
<tr>
<td>Angel</td>
<td>19</td>
<td>Null</td>
</tr>
<tr>
<td>Bridget</td>
<td>22</td>
<td>Married</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
</tr>
<tr>
<td>Vivian</td>
<td>18</td>
<td>Single</td>
</tr>
<tr>
<td>Demi</td>
<td>20</td>
<td>Engaged</td>
</tr>
<tr>
<td>John</td>
<td>30</td>
<td>Married</td>
</tr>
<tr>
<td>Angel</td>
<td>19</td>
<td>Null</td>
</tr>
<tr>
<td>Bridget</td>
<td>22</td>
<td>Married</td>
</tr>
</table>
</body>
</html>
Result
Table Header, Body and Footer.
As a lover of well structured code, I use the table header, footer and body alot., You can also use the <thead> , <tbody> and <tfoot> to create a more structured table.
Here is an example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Goods </th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hp laptop</td>
<td>1</td>
<td>$600</td>
</tr>
<tr>
<td>Lenovo</td>
<td>1</td>
<td>$400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>2</td>
<td>$1000</td>
</tr>
</tfoot>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Goods </th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hp laptop</td>
<td>1</td>
<td>$600</td>
</tr>
<tr>
<td>Lenovo</td>
<td>1</td>
<td>$400</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>2</td>
<td>$1000</td>
</tr>
</tfoot>
</table>
</body>
</html>
Result
Spanning Multiple rows and columns.
Spanning allows you to extend table rows and columns. This means that with the use of spanning, you can provide more space. To do this , you use rowspan or colspan attribute.
Spanning columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table border="1">
<tr>
<th>Text here</th>
<th colspan="2">Text here</th>
</tr>
<tr>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table border="1">
<tr>
<th>Text here</th>
<th colspan="2">Text here</th>
</tr>
<tr>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
<td>Text here</td>
</tr>
</table>
</body>
</html>
Result
Spanning rows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Text here</th>
<td>Text here</td>
</tr>
<tr>
<td>Text here</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Create a table</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Text here</th>
<td>Text here</td>
</tr>
<tr>
<td>Text here</td>
</tr>
</table>
</body>
</html>
Exercise: Create a school timetable using the rowspan and colspan attribute.
Follow us on
Please share
HTML
JavaScript
PHP
JAVA
Comments
Post a Comment