CSS Tables


Go to main Page

Tables in CSS

As we know that table is a need of webpage to display data in good manner.

Now we are going to style a table with all properties.

Example


<!DOCTYPE html>
<html>
<head>
    <title>Tablepractice1</title>
    <style>
        td{
            text-align: center;
            background-color: grey ;
            color: white;
        }
        th{
            background-color: #FFC300 ;
        }
        
        
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="15" align="center" width="50%">
        <th colspan="7">Batch-19 Info Table</th>
    <tr>
<th rowspan="10">Final Report</th>
        <th>Section</th>
        <th>Roll NO</th>
        <th>Name</th>
        <th>ID</th>
        <th>Department</th>
        <th>Batch</th>
    </tr>
    <tr>

        <td>A</td>
        <td>19011556-122</td>
        <td>Ali</td>
        <td>132</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>B</td>
        <td>19011556-123</td>
        <td>Shameer</td>
        <td>123</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>B</td>
        <td>19011556-163</td>
        <td>Faisal</td>
        <td>163</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>B</td>
        <td>19011556-061</td>
        <td>Zeeshan</td>
        <td>061</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>A</td>
        <td>19011556-102</td>
        <td>Ahmed</td>
        <td>102</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>C</td>
        <td>19011556-132</td>
        <td>Ayaan</td>
        <td>132</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>B</td>
        <td>19011556-062</td>
        <td>Saqlain</td>
        <td>062</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>A</td>
        <td>19011556-152</td>
        <td>Bilal</td>
        <td>152</td>
        <td>IT</td>
        <td>19</td>
    </tr>
    <tr>
        <td>C</td>
        <td>19011556-112</td>
        <td>Usman</td>
        <td>112</td>
        <td>IT</td>
        <td>19</td>
    </tr>
</table>
</body>
</html>




Let us style another table.


<!DOCTYPE html>
<html>
<head>
    <title>table tag  practice</title>
</head>
<body>
    <table border="2" cellspacing="0" cellpadding="30" align="center" width="60%" bgcolor=" yellow">
        <tr>
            <th>Section</th>
            <th>Batch</th>
            <th>name</th>
            <th>Roll no</th>
            <th>phone num</th>
        </tr>
        <tr>
            <td><b>B</b></td>
            <td>20</td>
            <td>ali</td>
            <td>3526273-536</td>
            <td>0343637373</td>
        </tr>
        <tr>
            <td><b>C</b></td>
            <td>20</td>
            <td>Hassan</td>
            <td>3456789-870</td>
            <td>03434567867</td>
        </tr>
        <tr>
            <td><b>A</b></td>
            <td>19</td>
            <td>ahmed</td>
            <td>2345678-765</td>
            <td>0342345675</td>
        </tr>
        <tr>
            <td><b>B</b></td>
            <td>20</td>
            <td>Ayaan</td>
            <td>3526273-566</td>
            <td>0343456773</td>
        </tr>
        <tr>
            <td><b>C</b></td>
            <td>18</td>
            <td>Faisal</td>
            <td>3526273-516</td>
            <td>0343665563</td>
        </tr>
    </table>

</body>
</html>