Discussion and Coding with Anik - Part 3 - CSS Div Tags with Lists and Tables
Hope this post finds you well. In this video,I explained the CSS Div Tags with Lists and Tables. Feel free to comment. For more, please subscribe and press the BELL icon. Please visit my CSS Playlist. Please link, comment, share and subscribe. The code is as follows -
HTML File -
<html>
<head> <title> Exercises 8 </title>
<link rel="stylesheet" href="exercises8.css">
</head>
<body>
<div>
<ul> <li> Lists to be purchased on Monday </li>
<li class="li_pro">
<table>
<tr> <th> Items </th> <th> Quantity </th> </tr>
<tr> <td> Milk </td> <td> 1 L </td> </tr>
<tr> <td> Bread </td> <td> 500g </td> </tr>
<tr> <td> Sugar </td> <td> 1 kg </td> </tr>
</table>
</li>
</ul>
</div>
<div>
<ul> <li id="li_type"> Lists to be purchased on Tuesday </li>
<li class="li_pro">
<table>
<tr> <th> Items </th> <th> Quantity </th> </tr>
<tr> <td> Carrot </td> <td> 500g </td> </tr>
<tr> <td> Rice </td> <td> 500g </td> </tr>
<tr> <td> Wheat </td> <td> 1 kg </td> </tr>
</table>
</li>
</ul>
</div>
<div>
<ol> <li> Lists to be purchased on Wednesday </li>
<li class="li_pro">
<table>
<tr> <th> Items </th> <th> Quantity </th> </tr>
<tr> <td> Noodles </td> <td> 1 kg </td> </tr>
<tr> <td> Potato </td> <td> 500g </td> </tr>
<tr> <td> Tomato </td> <td> 1 kg </td> </tr>
</table>
</li>
</ol>
</div>
</body>
</html>
CSS File -
ul {
list-style-type: circle;
}
.li_pro {
list-style-type: none;
}
table {
background-color: lightpink;
}
div{
background-color: lightblue;
width: 400px;
height: 150px;
float: left;
border: 1px solid green;
}
#li_type {
list-style-type: square;
}
ol {
list-style-type: lower-alpha;
}
HTML File -
<html>
<head> <title> Exercises 8 </title>
<link rel="stylesheet" href="exercises8.css">
</head>
<body>
<div>
<ul> <li> Lists to be purchased on Monday </li>
<li class="li_pro">
<table>
<tr> <th> Items </th> <th> Quantity </th> </tr>
<tr> <td> Milk </td> <td> 1 L </td> </tr>
<tr> <td> Bread </td> <td> 500g </td> </tr>
<tr> <td> Sugar </td> <td> 1 kg </td> </tr>
</table>
</li>
</ul>
</div>
<div>
<ul> <li id="li_type"> Lists to be purchased on Tuesday </li>
<li class="li_pro">
<table>
<tr> <th> Items </th> <th> Quantity </th> </tr>
<tr> <td> Carrot </td> <td> 500g </td> </tr>
<tr> <td> Rice </td> <td> 500g </td> </tr>
<tr> <td> Wheat </td> <td> 1 kg </td> </tr>
</table>
</li>
</ul>
</div>
<div>
<ol> <li> Lists to be purchased on Wednesday </li>
<li class="li_pro">
<table>
<tr> <th> Items </th> <th> Quantity </th> </tr>
<tr> <td> Noodles </td> <td> 1 kg </td> </tr>
<tr> <td> Potato </td> <td> 500g </td> </tr>
<tr> <td> Tomato </td> <td> 1 kg </td> </tr>
</table>
</li>
</ol>
</div>
</body>
</html>
CSS File -
ul {
list-style-type: circle;
}
.li_pro {
list-style-type: none;
}
table {
background-color: lightpink;
}
div{
background-color: lightblue;
width: 400px;
height: 150px;
float: left;
border: 1px solid green;
}
#li_type {
list-style-type: square;
}
ol {
list-style-type: lower-alpha;
}
Comments
Post a Comment