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>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td><span>✓</span></td>
<td>i</td>
<td>s</td>
<td><span>✓</span></td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
</tr>
</table>
</body>
</html>
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>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td><span>✓</span></td>
<td>i</td>
<td>s</td>
<td><span>✓</span></td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
</tr>
</table>
</body>
</html>
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>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td>s</td>
</tr>
<tr>
<td>2</td>
<td>Cristiano</td>
<td>a</td>
<td><span>✓</span></td>
<td>i</td>
<td>s</td>
<td><span>✓</span></td>
</tr>
<tr>
<td>3</td>
<td>Bale</td>
<td>a</td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
<td><span>✓</span></td>
</tr>
</table>
</body>
</html>
some explanation will be helpful for a beginner to understand.