Table in HTML & CSS
Wan to create a beautiful table and know the different properties of it?
I am here with a new blog about the table in HTML And CSS. As you all know to keep records containing different section we use Tables as you have seen in the schools that all informations are kept in the table form. So , let’s create your own table in HTML.
I am here with a new blog about the table in HTML And CSS. As you all know to keep records containing different section we use Tables as you have seen in the schools that all informations are kept in the table form. So , let’s create your own table in HTML.
To create table we use Table tag and
·
th – Table header to make the
heading in the table.
·
Td – Table data to fill the entries in the table.
·
Tr – Table row to create a
new row in table
I
have used nth- child property in the css to show different styling
tr:nth-child(even)
{
Background-color
: red;
}
And also used background image in table
just check out the code and you will understand the whole.
Check out this for better understanding
<!- -------------HTML Code----------------
!->
<!DOCTYPE html>
<html>
<head>
<title>Intoduction</title>
<link
rel="stylesheet" type="text/css"
href="style/intro.css">
</head>
<body>
<header id="head"><img
src"image path"><h2>Coder99</h2></header>
<table>
<tr><th>Name</th><th>Roll
no.</th><th>Marks</th></tr>
<tr><td>Superman</td><td>1</td><td>98</td></tr>
<tr><td>Spiderman</td><td>3</td><td>94</td></tr>
<tr><td>Thor</td><td>3</td><td>92</td></tr>
<tr><td>Xman</td><td>4</td><td>100</td></tr>
</table>
</body>
</html>
//**** CSS Code ****//
body
{
margin:
0px;
background-size:
cover;
}
h2
{
display:
inline;
}
#head
{
background
:url("Image location") ;
color:
white;
padding:
.5em;
margin-bottom:
2px;
}
img
{
height:
5em;
width:
5em;
}
table
{
background-image:url("Image
location");
color:
white;
border:
5px solid green;
border-spacing:
0em;
margin:
5em;
}
tr:nth-child(odd)
{
background-color:
green;
}
th , td
{
padding:
.5em;
column-width:
7em;
height:
2em;
}
//*** Easy code hope you enjoyed and
check the video for more understanding ***//
Comments
Post a Comment