Articles → HTML → Table in HTML

Table in HTML






What is a table?





Click to Enlarge


Syntax


<table border="">
        <tr>
            <td></td>
            <td></td>
        </tr>
</table>











Example


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Employee</td>
            <td>Location</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td>Gurgaon</td>
        </tr>
        <tr>
            <td>Ritesh</td>
            <td>Delhi</td>
        </tr>
    </table>
</body>
</html>



Output



Click to Enlarge


Cellpadding and cellspacing in tables








<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <table border="1" cellpadding="40" cellspacing="40">
        <tr>
            <td>Employee</td>
            <td>Location</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td>Gurgaon</td>
        </tr>
        <tr>
            <td>Ritesh</td>
            <td>Delhi</td>
        </tr>
    </table>
</body>
</html>





Click to Enlarge


Rowspan and columnspan in HTML






<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Rowspan demo</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Employee</td>
            <td>Location</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td rowspan="2">Gurgaon</td>
        </tr>
        <tr>
            <td>Ritesh</td>
        </tr>
    </table>
</body>
</html>





Click to Enlarge





<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Colspan demo</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Location</td>
            <td>Employee</td>
        </tr>
        <tr>
            <td colspan="2">Gurgaon</td>
        </tr>
        <tr>
            <td>Karan</td>
            <td>Ritesh</td>
        </tr>
    </table>
</body>
</html>





Click to Enlarge


Browser support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Saturday, November 26, 2016
 
Updated On  -  Sunday, December 03, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250