How to Create a Simple Table View Using HTML CSS

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Storage is Full