Guys today is part 13 and last part of Tables in HTML5, today we will learn how to add links in tables and CSS in tables. We will use both Internal and External CSS. we have tell you every bit of these tags.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Tables | Tutting City</title> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" href="sheet2.css" /> | |
</head> | |
<body> | |
<table width="100%" border="3" cellspacing="5" cellpadding="3"> | |
<tr id="t1"> | |
<th>Product</th> | |
<th>Price</th> | |
<th>Quantity</th> | |
<th>Quality</th> | |
<th>Image</th> | |
<th>Detail</th> | |
</tr> | |
<tr class="rice"> | |
<td >Rice</td> | |
<td >____ </td> | |
<td>3kg</td> | |
<td>Good</td> | |
<td><img src="rice.jpg" width="100px" /></td> | |
<td><a href="https://en.wikipedia.org/wiki/Rice" target="_blank">Rice Wiki</a></td> | |
</tr> | |
<tr class="chicken"> | |
<td>Chicken</td> | |
<td>____</td> | |
<td>5kg</td> | |
<td>Good</td> | |
<td><img src="chicken.jpg" width="100px" /></td> | |
<td><a href="https://en.wikipedia.org/wiki/Chicken" target="_blank">Chicken Wiki</a></td> | |
</tr> | |
<tr class="pizza"> | |
<td>Pizza</td> | |
<td>____</td> | |
<td>Medium Size</td> | |
<td>Chesse</td> | |
<td><img src="Pizza.jpg" width="100px" /></td> | |
<td><a href="https://en.wikipedia.org/wiki/Pizza" target="_blank">Pizza Wiki</a></td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Sheet2
table{
background-color: #ffffff;
border-color: white;
}
#t1{
background-color: #ff8000;
color: white;
height: 50px;
font-size: 25px;
font-family: cursive;
}
tr.rice{
background-color: #007900;
color: white;
}
tr.chicken{
background-color: #804000;
color: white;
}
tr.pizza{
background-color: #ea591c;
color: white;
}
a {
color: white;
font-size: 20px;
font-family: fantasy;
text-decoration: none;
} background-color: #ffffff; border-color: white; } #t1{ background-color: #ff8000; color: white; height: 50px; font-size: 25px; font-family: cursive; } tr.rice{ background-color: #007900; color: white; } tr.chicken{ background-color: #804000; color: white; } tr.pizza{ background-color: #ea591c; color: white; } a { color: white; font-size: 20px; font-family: fantasy; text-decoration: none; }
background-color: #ffffff;
border-color: white;
}
#t1{
background-color: #ff8000;
color: white;
height: 50px;
font-size: 25px;
font-family: cursive;
}
tr.rice{
background-color: #007900;
color: white;
}
tr.chicken{
background-color: #804000;
color: white;
}
tr.pizza{
background-color: #ea591c;
color: white;
}
a {
color: white;
font-size: 20px;
font-family: fantasy;
text-decoration: none;
} background-color: #ffffff; border-color: white; } #t1{ background-color: #ff8000; color: white; height: 50px; font-size: 25px; font-family: cursive; } tr.rice{ background-color: #007900; color: white; } tr.chicken{ background-color: #804000; color: white; } tr.pizza{ background-color: #ea591c; color: white; } a { color: white; font-size: 20px; font-family: fantasy; text-decoration: none; }
[tab] [content title="YouTube" icon="fa-youtube"] [/content] [/tab]
0 comments:
Post a Comment