Scribd Logo
Upload

Welcome to Scribd!

  • 11 views

    Table and Border Styling Using Css

    Uploaded by

    zeeshan2001md0
    The document describes how to style tables and borders using CSS. Styles are applied to the table, rows, columns and cells to control text alignment, borders, backgrounds and hovers. Gradient background is also applied to the table. The styles are used to create a sample timetable inside a table.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Table and Border Styling Using Css

    Uploaded by

    zeeshan2001md0
    11 views7 pages
    The document describes how to style tables and borders using CSS. Styles are applied to the table, rows, columns and cells to control text alignment, borders, backgrounds and hovers. Gradient background is also applied to the table. The styles are used to create a sample timetable inside a table.

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document describes how to style tables and borders using CSS. Styles are applied to the table, rows, columns and cells to control text alignment, borders, backgrounds and hovers. Gradient background is also applied to the table. The styles are used to create a sample timetable inside a table.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    11 views7 pages

    Table and Border Styling Using Css

    Uploaded by

    zeeshan2001md0
    The document describes how to style tables and borders using CSS. Styles are applied to the table, rows, columns and cells to control text alignment, borders, backgrounds and hovers. Gradient background is also applied to the table. The styles are used to create a sample timetable inside a table.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 7

    TABLE AND BORDER STYLING USING CSS.

    <html>
    <head>
    <title>Table</title>

    <Style>
    body{
    background-color: aqua;
    }
    h1,h2{
    text-align: center;
    text-decoration: underline;
    }
    #table-1,td,th{
    text-align: center;
    margin: auto;
    border: 2px solid;
    border-collapse: collapse;
    width:"90%";
    }
    tr:hover{
    background: black;
    color: yellow;
    }
    th:hover{
    background: red;
    color: aqua;
    }
    td:hover{
    background:yellow;
    color: rgb(14, 12, 12);
    }
    h1:hover,h2:hover{
    background: black;
    color: whitesmoke;
    }
    table{
    /* background: linear-gradient(orange,white,green);*/
    background: linear-gradient(150deg,orange,white,green);
    }
    </Style>
    </head>
    <body>
    <h1>MAULANA AZAD NATIONAL URDU UNIVERSITY </h1>
    <h2>DEPARTMENT OF COPUTER SCIENCE & ENGINEERING(4<sup>TH</
    sup>SEMESTER)</h2>
    <table id="table-1">
    <th colspan="11"> Time Table
    <tr>
    <th rowspan="2">Days</th>
    <th rowspan="2">Sem.</th>
    <th>1<sup>st</sup>Period</th>
    <th>2<sup>nd</sup>Period</th>
    <th>3<sup>rd</sup>Period</th>
    <th>4<sup>th</sup>Period</th>
    <th>Lunch Break</th>
    <th>5<sup>th</sup>Period</th>
    <th>6<sup>th</sup>Period</th>
    <th>7<sup>th</sup>Period</th>
    <th>8<sup>th</sup>Period</th>
    </tr>

    <tr>
    <td> 9:00AM-10:00AM</td>
    <td>10:00AM-11:00AM</td>
    <td>11:00AM-12:00Noon</td>
    <td>12:00Noon-01:00PM</td>
    <td>01:00PM-01:40PM</td>
    <td>01:40PM-02:40PM</td>
    <td>02:40PM-03:40PM</td>
    <td>03:40PM-04:40PM</td>
    <td>04:40PM-05:40PM</td>
    </tr>

    <tr>
    <th>Monday</th>
    <th>IV</th>
    <td>LIBRARY</td>
    <td>DPCS403PCT<br>CR-6</td>
    <td colspan="2">DPCS401PCT<br>CR-6</td>
    <td></td>
    <td colspan="3">DPCS404PCP CSE LAB-II(G1)<br>DPCS402PCP CSE LAB-I(G2)</
    td>
    <td>SPORTS</td>
    </tr>
    <tr>
    <th>Tuesday</th>
    <th>IV</th>
    <td colspan="2">DPCS404PCT<br>CR-6</td>
    <td colspan="2">DPCS405PCT<br>CR-6</td>
    <td></td>
    <td colspan="3">DPCS401PCP CSE LAB-I(G1)<br>DPCS403PCP CSE LAB-II(G2)</
    td>
    <td>ECA</td>
    </tr>

    <tr>
    <th>Wednesday</th>
    <th>IV</th>
    <td>DPCS401PCT<br>CR-6</td>
    <td colspan="2">DPCS403PCT<br>CR-6</td>
    <td>DPCS405PCT<br>CR-6</td>
    <td></td>
    <td colspan="3">DPCS402PCP CSE LAB-I(G1)<br>DPCS404PCP CSE LAB-II(G2)</
    td>
    <td>ECA</td>
    </tr>

    <tr>
    <th>Thursday</th>
    <th>IV</th>
    <td colspan="2">DPCS402PCT<br>CR-6</td>
    <td colspan="2">DPCC401SEP<br>CSE-LAB-I</td>
    <td></td>
    <td>DPCS404PCT<br>CR-6</td>
    <td colspan="2">LIBRARY</td>
    <td>ECA</td>
    </tr>

    <tr>
    <th>Friday</th>
    <th>IV</th>
    <td colspan="3">DPCS403PCP CSE LAB-II(G1)<br>DPCS401PCP CSE LAB-I(G2)</
    td>
    <td>DPCS402PCT<br>CR-6</td>
    <td></td>
    <td colspan="3">SPORTS</td>
    <td>ECA</td>
    </tr>

    <tr>
    <th>Saturday</th>
    <th>IV</th>
    <td>DPCS401PCT<br>CR-6</td>
    <td>DPCS402PCT<br>CR-6</td>
    <td>DPCS403PCT<br>CR-6</td>
    <td>DPCS405PCT<br>CR-6</td>
    <td></td>
    <td>DPCS404PCT<br>CR-6</td>
    <td colspan="3">DPCS401PCP CSE LAB-I(G1)<br>DPCS403PCP CSE LAB-II(G2)</
    td>
    </tr>

    </body>
    </html>
    OUTPUT:

    file:///C:/Users/MD%20ZEESHAN/Desktop/Darbi_Institute/css/timetable2.html
    LIST STYLING AND BORDER USING CSS.

    <!DOCTYPE html>
    <html lang="en">
    <head>

    <title>List Style</title>

    <style>
    #ol-1{
    list-style-type:upper-alpha;
    list-style-position: inside;
    }

    ol li{
    border: 2px solid orangered;

    #ul-1{
    list-style-type: circle;
    }

    #ul-2{
    list-style-type: square;
    }
    </style>
    </head>
    <body>
    <ol id="ol-1">
    <li>Apple</li>
    <li>Mango</li>
    <li>Banana</li>
    <li>Papaya</li>
    <li>Orange</li>

    </ol>
    <ol id="ol-2">
    <li>Apple</li>
    <li>Mango</li>
    <li>Banana</li>
    <li>Papaya</li>
    <li>Orange</li>

    </ol>

    <ul id="ul-1">
    <li> <b>Fresh</b> Apple</li>
    <li>Mango</li>
    <li>Banana</li>
    <li>Papaya</li>
    <li>Orange</li>
    </ul>

    <ul id="ul-2">
    <li> <b>Fresh</b> Apple</li>
    <li>Mango</li>
    <li>Banana</li>
    <li>Papaya</li>
    <li>Orange</li>
    </ul>
    </body>
    </html>

    OUTPUT:-

    You might also like