In the previous post about htm, css.etc, there was a quiet review on how to make overlays on an image, overlays are an overlay that is in an area that we have specified, for more details please friends can read the post below:
This time I will continue to review about htm, css .etc more specifically how to create a table view, because previously we have created an input form of course we will need a page to display the user data that we have entered. Here’s the html code we need.
For friends who don’t have the whole code, you can check the article posting in the Related Post section below this article.
Data Input Form
| No | Username | Full name | Address | Religion | Gender |
|---|---|---|---|---|---|
| 1 | Violet | Violet Evergarden | Jl fatmawati no 5 | Christian | Woman |
| 2 | AF | Alucard de franco | Jl Mawar no 10 | catholic | Man |
| 3 | Miya | Miya | Jl goodness no 7 | Islam | Woman |
| 4 | Sun | Sun MK | Jl. Silk no. 1 | Buddha | Man |
| 5 | YSS | Yisun sin | Jl seven five no 9 | Hindu | Man |
what this time we need to create an html table is to get to know the table code, tr, th, td.
-
…
this table code is an element that serves to create a table in html
-
… code tr or table row serves to create table rows
-
… th code or table header functions to create the names of the main columns
-
… td code or table data serves to create a display in the columns after the table header
in addition to the html code above, we also need a little css to beautify the appearance of the table. Here’s the css code:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
tr:nth-child(odd) {
background-color: #f9f9f9;
}
th {
background-color: #d8d8d8;
}
td, th {
border: 1px solid #f9f9f9;
text-align: left;
padding: 8px;
}
put this css in the file we created earlier, style.css. If you haven’t followed the post about how to separate the css and html codes into two different files, you can check the article posting link on the related post or we can also put this css code in the …. If all the code has been saved, then the table will look like the image above the title:
That’s a review of how to make a simple table display using html css, if you have any suggestions or questions, I’ll wait for you in the comments column, bro. Thank you
