Thursday, February 27, 2020

Table in HTML with CSS

CODE:

<!DOCTYPE html>
<html>
    <head>
        <title>Simple table</title>
        <style>
            .table1{
            outline-width: 2px; outline-style: double;
            outline-color:rgb(255, 47, 161);}
            th{padding: 15px; background-color: gray;}
            td{padding: 10px;}
            .table1, th, td{border: 1px solid red;
                border-collapse: collapse;}
            tr :hover{background-color: yellow;
            border: 2px solid green;font-size: 20px;
            color: red;border-radius: 10px 20px;}   
        </style>
    </head>
    <body>
        <table class="table1">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Mobile No</th>
                <th>Course</th>
            </tr>
            <tr>
                <td>001</td>
                <td>John</td>
                <td>john@yahoo.com</td>
                <td>424323</td>
                <td>Java</td>
            </tr>
            <tr>
                <td>002</td>
                <td>Rohan</td>
                <td>rohann@yahoo.com</td>
                <td>15966</td>
                <td>Android</td>
            </tr>
            <tr>
                <td>003</td>
                <td>Sandy</td>
                <td>sandy@yahoo.com</td>
                <td>424323</td>
                <td>Webside Developer</td>
            </tr>
            <tr>
                <td>004</td>
                <td>Shawn</td>
                <td>shawn@gmail.com</td>
                <td>424323</td>
                <td>iOS</td>
            </tr>
        </table>
    </body>
</html>

OUTPUT:

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Simple Example of div tag in html with css

HTML and CSS Code : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <m...

  • first-angular Project
    Output :  I have created "first-angular" name project and in this project have a 3 components named as header, footer and section ...
  • HTML Basic Tags
    Program: <!DOCTYPE html> <html>     <head>         <title>All Tags in HTML</title>     </head>  ...