Ở bài trước tôi đã viết rất kỹ phần lý thuyết về tạo bảng trong HTML. Và vì bài trước quá dài nên tôi không thể gộp chung phần bài tập vào nó được. Ở phần này là các bài tập về tạo bảng để các bạn ôn lại cũng như thực hành về phần tạo bảng trong HTML.
1. Bài tập 1
Làm các đường viền (border) dưới đây thành 01 đường viền đơn.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
2. Bài tập 2
Làm cho bảng rộng 400 pixels.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:400px">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
3. Bài tập 3
Thêm tiêu đề vào bảng với cụm từ “BẢNG DANH SÁCH”
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>BẢNG DANH SÁCH</caption>
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
4. Bài tập 4
Thay đổi đường viền của bảng thành 5 pixel và màu đỏ (red)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
Câu trả lời của bài tập 4
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 5px solid red;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
5. Bài tập 5
Căn chỉnh các đoạn văn trong bảng dưới đây sang bên phải (right)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
Câu trả lời của bài tập 5
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: right;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
6. Bài tập 6
Thêm màu nền đen với văn bản trắng cho tất cả các hàng của bảng.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
Câu trả lời của bài tập 6
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
tr {
background-color: black;
color: white;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Tên</th>
<td>Nguyen Huu The Binh</td>
</tr>
<tr>
<th rowspan="2">Số điện thoại</th>
<td>0907778899</td>
</tr>
<tr>
<td>0903334455</td>
</tr>
</table>
</body>
</html>
7. Lời cuối bài
Vậy là chúng ta đã kết thúc về các bài tập tạo bảng (table). Ở bài sau tôi sẽ viết xoay quanh chủ đề về danh sách (list) trong HTML.
The post [HTML bài 20] Các bài tập về tạo bảng (table) appeared first on Học online.
from WordPress http://ift.tt/2waujvn
via IFTTT
Không có nhận xét nào:
Đăng nhận xét