HTML Table CSS Examples Beautiful
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Pragati
In this tutorial we will show you the solution of HTML table CSS examples beautiful, in HTML there are many ways with the help of which you are able to make a creative table.
You can use CSS in table, and also inbuilt table tag attributes can be used to make a creative table.
We can only able to teach you attributes and show you creative table examples.
Rest is upon you that how you can use them and what you want in table to make it creative and beautiful.
Step By Step Guide On HTML Table CSS Examples Beautiful :-
As, there are many ways to make a creative table, and before starting you must have knowledge of table tag attributes and basic CSS knowledge.
Let us create a basic table and discuss what we can do in that. Let’s create table first:
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body style="text-align: center;"> <table> <tr> <th> first name </th> <th> last name </th> </tr> <tr> <td> Robert </td> <td> Shampoo </td> </tr> <tr> <td> Rock </td> <td> kill </td> </tr> </table> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, we create a table with the help of tr and td, th. This is common format which we use. Now, let us explain what you can do to make a creative or beautiful table.
- We can change the collapse the border of table and changes the border color.
- We can apply color to th, the topmost row to table and changes its background color to make a creative table header.
- We can change the width of table and customize width of columns for better look.
- We can disappears the borders of cells or rows and apply different background colors to all rows.
- We can use padding in cells and apply css on cells to change its format.
- We can apply different background colors to even rows and different background color to odd rows. This is professional way to make a creative table.
- We can use different font style to table headers and its data.
- We can use rowspan and colspan in table also.
- The main thing is upon you that what you want. If developers have basic knowledge of html, css then with the help of above ideas he/she may able to create a beautiful table. We can also apply jQuery and JavaScript on tables.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article you are able to create a beautiful table in html with the help of css. I hope this tutorial on HTML table CSS examples beautiful helps you.
About Pragati
