How To Create Tables In HTML?
How To Create Tables In HTML?
How to Create a Table in HTML
Hello Sob! after you learn the Kinds of Lists in HTML and how to make them in the previous post. The article that the admin made this time will explain How to Create a Table in HTML. Okay, let's go straight to the discussion Cekidot!
The table element or what we call a table is an html element that is used to create a table on an html page. In making a table we must pay attention to several elements including:
1. Horizontal row or arrangement from right to left
2. Column or vertical arrangement from top to bottom
3. Cells or places to input and store data
4. Line
Now that is the main element in a table if we want to create a table in HTML we need an html tag that is devoted to creating a table.
TABLE OF CONTENTS
1. HTML Tags To Create Table
2. Attribute Table
3. Conclusion
HTML Tags To Create Table
1. <table> – to start in creating a table
2. <tr> or table row – used to create a row in a table
3. <th> or table header – used as header in table
4. <td> or table data – used as columns and cells or places to input and store data
5. <tbody> or table body – used to wrap the body of the table
6. <thead> or table header – used to wrap the head of the table
7. <tfoot> or table footer – used to wrap around the bottom of the table
But the tags that are common or often used in creating a table are 3, namely:
1. <table>
2. <tr>
3. <td>
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to Create a Table in HTML</title>
</head>
<body>
<table style="width: 50%;">
<tr>
<th>Name</th>
<th>Department</th>
<th>No Absence</th>
</tr>
<tr>
<td>Doni</td>
<td>TKJ</td>
<td>15</td>
</tr>
<tr>
<td>Dono</td>
<td>TKJ</td>
<td>16</td>
</tr>
<tr>
<td>Early</td>
<td>TKJ</td>
<td>17</td>
</tr>
</table>
<br><br>
<hr>
<table style="width: 50%;">
<tr>
<td>Name</td>
<td>Department</td>
<td>No Absence</td>
</tr>
<tr>
<td>Doni</td>
<td>TKJ</td>
<td>15</td>
</tr>
<tr>
<td>Dono</td>
<td>TKJ</td>
<td>16</td>
</tr>
<tr>
<td>Early</td>
<td>TKJ</td>
<td>17</td>
</tr>
</table>
</body>
</html>
Result:
How To Create Tables In HTML? 1
It can be seen in the picture that we have 2 tables with 4 rows or <tr> (table row) and each row we have 3 columns <td> (table data). If we look at the first table using <th> while the second table without using <th>. You can see the difference if we use <th>Â (table heading), the text in the table heading will not unite with the <td> tag.
Attribute Table
The table element also has attributes that are very useful for maximizing the appearance of the table, including:
1. Border or table line
2. Cellspacing or the distance between cells
3. Cellpadding or spacing in a cell
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to Create a Table in HTML</title>
</head>
<body>
<table border="3" cellspacing="10" cellpadding="5">
<tr>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>CSS</td>
<td>JavaScript</td>
</tr>
</table>
</body>
</html>
Result:
How To Create Tables In HTML? 2
It can be seen in the picture that the lines are the borders, the spacer between <td> is cellspacing, and the spacer inside a <td> is cellpadding.
If we want to combine 2 cells, it is usually called merging or if you often use Excel, you must be familiar with the merge cells feature. Now to make it in the HTML Table we can use these 2 attributes:
1. colspan – used to join 2 horizontal tables
2. rowspan – used to join 2 vertical tables
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to Create a Table in HTML</title>
</head>
<body>
<table style="width: 50%;" border="3" cellspacing="0" cellpadding="4">
<tr>
<th rowspan="3">Rowspan</th>
<th colspan="4">Colspan</th>
</tr>
<tr>
<td>Column 1 Row 1</td>
<td>Column 1 Row 2</td>
<td>Column 1 Row 3</td>
</tr>
<tr>
<td>Column 2 Row 1</td>
<td>column 2 Row 2</td>
<td>column 2 Row 3</td>
</tr>
</table>
</body>
</html>
Result:
How To Create Tables In HTML? 3
It can be seen in the picture that if we give rowspan of 3 then the three columns downwards or vertically will be combined whereas if we give colspan of 3 then the three columns to the side or horizontally will be combined
Conclusion
So the table consists of rows, columns, cells, and lines. To create a table in HTML, a minimum of 3 main tags are needed, namely <table>, <tr>, and <td>. To make the table look more attractive, use the table attribute.
__________________________________________________________________________________________________________________________________________________________________________________________________________________ ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ _________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________ ________________________________________________________________________________________________ ________
Hopefully, this article about How To Create Tables In HTML?, gives you a little insight. Also, read an article about How to Create USB Drive for Firmware Update that you may need to know. Thank you.