A table is used to show data that can be evaluated or assigned to a criteria
For a table you will use a <table> tag then for the table headings you will use the <th> tag and for the table data the <td> tag. The <th> and <td> tags will be surrounded per table row with a <tr> tag
The table below was created using this scheme:
| GPU | Price | Release |
|---|---|---|
| NVIDIA Geforce RTX 5090 | ca. 2500€ | 2025 |
| NVIDIA Geforce RTX 4090 | ca. 2800€ | 2022 |
| AMD RX 9070XT | ca. 700€ | 2025 |
In order to center the table you will use margin: auto; for the table element in your css file
For the tables borders you will use border: 1px solid #000; and border-collapse: collapse; on the elements table, th, td because otherwise if you would try to use it on tr it won't work
The rest of the styling to make it more readable you will use padding: 7px; and width: 60%. But those values can be adjusted as needed
With html and CSS there are multiple ways to utilize colors. There are the standard built-in colors like blue, green, red and on the other hand there are hsl colors which offer a much greater color palette where you can even customize saturation and lightness. For example these are the same colors but this one is much more saturated and darker and this one is less saturated and lighter
There are different options to set colors. You can control the color of the text elements within an element with the color: property and the background color with the background-color: property
Here are different possibilites to set the same color
However, rgb and hsl have the option to customize the property opacity. In order to do this you will have to call it for example rgba(0, 0, 255, 0.5) this will give it 50% opacity. The same goes for hsla(240, 100%, 50%, 0.5)
It is important to provide a throughout responsive website to achieve the best possible user experience independently of the users' device and screen size.
Therefore, there is a technique called media queries which allows you to set up rules in order to restructure the html's appearance based on the screens' size. With the help of those queries you can avoid badly formatted html for every screen size.
You have to fullfill one pre-requisite in order to use the media queries in your css files.
Inside of the html head add a viewport <meta> tag which allows us to control the width and scaling of the viewport so that it’s sized and scaled correctly on all devices:
After that you can start writing media queries in your styling file.
For example the styling for this project contains this media query:
It is checking if the width is below 480px or the orientation is portrait. If one of those two checks is true it will rearrange the collapsible-container classes (the notes) in order to make it more readable.