Apply CSS to HTML TABLE tag. Specify a border for table, th and td elements, Use of border- properties, Specify the width and height of a table, Set the alignment of content , Specify the padding for th and td elements, Specify the color of the table borders, Set the position of the table caption, Set background color or put background image, Give hyper link on any one data of the table. ___________________________________________________________________________ Table Page <!DOCTYPE html> <html> <head> <title>Table</title> <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"> <link href=\"https://fonts.googleapis.com/css2?family=Handlee&display=swap\" rel=\"stylesheet\"> </head> <body> <div class=\"menu\"> <div class=\"title\"> <h2>-: Table :-</h2> </div> <table> <tr> <td>No</td> <td>Enrollment No</td> <td>Name</td> <td>Persantage</td> <td>Age</td> </tr> <tr> <td>1</td>
<td>196470307065</td> <td>Zeel</td> <td>7.00 RPI</td> <td>18</td> </tr> <tr> <td>2</td> <td>196470307055</td> <td>Viraj</td> <td>8.00 RPI</td> <td>16</td> </tr> <tr> <td>3</td> <td>196470307013</td> <td>Smit</td> <td>8.90 RPI</td> <td>17</td> </tr> <tr> <td>4</td> <td>196470307062</td> <td>jay</td> <td>8.00 RPI</td> <td>18</td> </tr> </table> <div class=\"link\"> <a href=\"https://www.w3schools.com/\">Teaching Website development</a>
</div> Css Page </div> </body> </html> { padding: 0; margin: 0; font-family: 'Handlee', cursive; } .menu{ background-image: url('bg.jpg'); height: 100vh; } .title{ position: absolute; top: 20%; left: 50%; transform: translate(-50%,-50%); } .title h2{ font-size: 20px; letter-spacing: 2px; padding: 5px 15px; border:2px solid white;
color: black; background-color: lightblue; border-radius: 15px; } table{ position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); border:2px solid white; padding: 2px; } td{ padding: 7px; color: black; background-color: lightblue; letter-spacing: 1px; text-align: center; font-size: 17px; font-weight: #1100; } .link{ position: absolute; top: 70%; left: 50%; transform: translate(-50%,-50%); }
.link a{ padding: 5px 20px; color: black; background-color: white; text-decoration: none; font-size: 17px; border-radius: 15px; letter-spacing: 1px; } a:hover{ color: black; background-color: lightblue; }
Output __________________________________________________________ • Table Page
Search
Read the Text Version
- 1 - 6
Pages:
