Solution 1 :

You can use colspan for td.

<!DOCTYPE html>

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title>Table Danial Syah XI RPL 2</title>
</head>
<body>
    <table border="1">
        <tr>
            <td style="background-color:crimson" rowspan="2">No</td>
            <td style="background-color:deepskyblue" rowspan="2">Nama</td>
            <td colspan="5" style="background-color:chartreuse;">Pertemuan</td>
        </tr>
        <tr>
            <td style="background-color:darkcyan;">1</td>
            <td style="background-color:darkcyan">2</td>
            <td style="background-color:darkcyan">3</td>
            <td style="background-color:darkcyan">4</td>
            <td style="background-color:darkcyan">5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Neymar</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td>s</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Cristiano</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td>i</td>
            <td>s</td>
            <td><span>&#10003;</span></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bale</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
        </tr>
    </table>
</body>
</html>

Solution 2 :

You can use colspan attribute on td to take column by giving columns as a number. Below is the working code as you expected it to be.

<!DOCTYPE html>

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title>Table Danial Syah XI RPL 2</title>
</head>
<body>
    <table border="1">
        <tr>
            <td style="background-color:crimson" rowspan="2">No</td>
            <td style="background-color:deepskyblue" rowspan="2">Nama</td>
            <td style="background-color:chartreuse;" colspan="5">Pertemuan</td>
        </tr>
        <tr>
            <td style="background-color:darkcyan;">1</td>
            <td style="background-color:darkcyan">2</td>
            <td style="background-color:darkcyan">3</td>
            <td style="background-color:darkcyan">4</td>
            <td style="background-color:darkcyan">5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Neymar</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td>s</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Cristiano</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td>i</td>
            <td>s</td>
            <td><span>&#10003;</span></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bale</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
        </tr>
    </table>
</body>
</html>

Problem :

So i try to duplicate an html table in the link picture below,but i dont know how to set the widht of a table data. In that picture there’s a table data with the value of ‘1’ under ‘Pertemuan’, and i want to set the size of ‘1’ the same size as the other 2,3,4,5,Just like in the picture.
(https://i.stack.imgur.com/g0r6r.png)

Below is my HTML code trying to duplicate the table in the picture

<!DOCTYPE html>

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title>Table Danial Syah XI RPL 2</title>
</head>
<body>
    <table border="1">
        <tr>
            <td style="background-color:crimson" rowspan="2">No</td>
            <td style="background-color:deepskyblue" rowspan="2">Nama</td>
            <td style="background-color:chartreuse;">Pertemuan</td>
        </tr>
        <tr>
            <td style="background-color:darkcyan;">1</td>
            <td style="background-color:darkcyan">2</td>
            <td style="background-color:darkcyan">3</td>
            <td style="background-color:darkcyan">4</td>
            <td style="background-color:darkcyan">5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Neymar</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td>s</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Cristiano</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td>i</td>
            <td>s</td>
            <td><span>&#10003;</span></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bale</td>
            <td>a</td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
            <td><span>&#10003;</span></td>
        </tr>
    </table>
</body>
</html>

Comments

Comment posted by Rob

Note: the

Comment posted by Sanan Ali

some explanation will be helpful for a beginner to understand.

By