 | Trong việc thiết kết bảng(table) HTML thì việc gặp các trường hợp phải nối các cột cells lại để trình trình bày nội dung của bảng một cách logic và chuyên nghiệp. Bài viết này tôi sẽ hướng dẫn cách nối hai ô dạng cột(merge two column cells). |
Phát thảo thiết kế - Design Sketches:
Mã nguồn - Source code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1px" style="width: 100%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
</body>
</html>
<html>
<head>
</head>
<body>
<table border="1px" style="width: 100%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
</body>
</html>
Kết quả - Result:
| Month | Savings |
|---|---|
| January | $100 |
| February | $100 |
| Sum: $180 | |
Source: w3schools
No comments:
Post a Comment