How to Add Tables in HTML
buayaberdiri.blogspot.com - In html we can insert a table, this table serves to display data or information according to the number of columns and rows. Tables are also often used on websites.
Example of creating a table in html :
<!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.0">
<script src="index01.js"></script>
<title>buayaberdiri.blogspot.com</title>
</head>
<body>
<table>
<tr>
<td>
Example Table 1
</td>
<td>
Example Table 2
</td>
<td>
Example Table 3
</td>
</tr>
<tr>
<td>
Example Table 01
</td>
<td>
Example Table 02
</td>
<td>
Example Table 03
</td>
</tr>
</table>
</body>
</html>
Then the result will be like this :
In the image above, the table does not have a line. To create a line in the table, we add the css code directly to the <table> tag.
Example of creating a line on 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.0">
<script src="index01.js"></script>
<title>buayaberdiri.blogspot.com</title>
<style>
table, tr, td{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Example Table 1
</td>
<td>
Example Table 2
</td>
<td>
Example Table 3
</td>
</tr>
<tr>
<td>
Example Table 01
</td>
<td>
Example Table 02
</td>
<td>
Example Table 03
</td>
</tr>
</table>
</body>
</html>
In the above code we add css code with border property and 1px solid black property value. That's a short code to create a line in css.
Then the result will be like this :
How to make one line in html table
The code above shows some lines in the table, maybe it doesn't look good. You can turn it into a single line in the table.
See code sample :
<!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.0">
<script src="index01.js"></script>
<title>buayaberdiri.blogspot.com</title>
<style>
table, tr, td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Example Table 1
</td>
<td>
Example Table 2
</td>
<td>
Example Table 3
</td>
</tr>
<tr>
<td>
Example Table 01
</td>
<td>
Example Table 02
</td>
<td>
Example Table 03
</td>
</tr>
</table>
</body>
</html>
Pay attention to the code above, precisely in the CSS or Style section. I created the table to be 1 line using the border-collapse property and the value is collapse, the code is to convert it to 1 line in the table.
So the result of the code above :
The table above can still be improved by adding the color, height and width of the column or row in the css code or style tag.