- Để tạo được một cái bảng giống phía trên thì chúng ta thực hiện lần lượt các bước sau:
- Bước 2: Xác định số hàng nằm bên trong bảng.
]
- Bước 1: Xác định một cái bảng
- Bước 2: Xác định số hàng nằm bên trong bảng.
- Bước 3: Xác định số ô nằm bên trong mỗi hàng.
[hàng đầu tiên có ba ô tiêu đề, ba hàng còn lại thì mỗi hàng có ba ô bình thường]
- Bước 1: Xác định một cái bảng
- Bước 2: Xác định số hàng nằm bên trong bảng.
- Bước 3: Xác định số ô nằm bên trong mỗi hàng.
- Bước 4: Xác định nội dung của
từng ô.
Họ tên
Ngày sinh
Giới tính
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
- Bước 1: Xác định một cái bảng
- Bước 2: Xác định số hàng nằm bên trong bảng.
- Bước 3: Xác định số ô nằm bên trong mỗi hàng.
- Bước 4: Xác định nội dung của từng ô.
- Bước 5: Thiết lập thuộc tính border với giá trị 1 để tạo đường viền cho bảng và các ô.
Họ tên
Ngày sinh
Giới tính
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
3] Các thuộc tính được dùng trong việc tạo bảng
- Dưới đây là danh sách một số thuộc tính thường được áp dụng
trong việc tạo bảng.
[các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính]
border
| - Thiết lập độ dày của cái đường viền bao xung quanh bảng và các ô.
|
cellspacing
| - Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận.
|
cellpadding
| - Thiết lập khoảng cách vùng đệm bên trong các ô.
|
bgcolor
| - Thiết lập màu nền cho bảng hoặc các ô.
|
width
| - Thiết lập chiều rộng cho bảng hoặc các ô.
|
height
| - Thiết lập chiều cao cho bảng hoặc các ô.
|
align
| - Canh lề cho nội dung bên trong ô [theo chiều ngang]
|
valign
| - Canh lề cho nội dung bên trong ô [theo chiều dọc]
|
4] Cách gộp các ô bên trong bảng lại với nhau
- Thông thường, khi tạo một cái bảng thì số ô trên mỗi hàng phải bằng nhau. Tuy nhiên, có một vài trường hợp đặc biệt, chúng ta cần phải tạo ra những cái bảng mà số ô trên mỗi hàng có sự hơn kém nhau.
Họ tênGiới tínhKết quả thi
ToánLýHóa
Trần Đức Anh
| Nam
| 7.25
| 8.0
| 3.75
|
Mai Đức Hiếu
| Nam
| 7.0
| 9.0
| 4.75
|
- Để làm được điều đó thì chúng ta cần phải gộp các ô lại với nhau.
4.1] Gộp các ô theo chiều ngang
- Để gộp các ô theo chiều ngang thì chúng ta đặt thuộc tính colspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải.
- Cú pháp:
colspan="số ô muốn gộp lại với nhau"
THÔNG TIN SINH VIÊN
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
Xem ví dụ
4.2] Gộp các ô theo chiều dọc
- Để gộp các ô theo chiều dọc thì
chúng ta đặt thuộc tính rowspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía dưới.
- Cú pháp:
rowspan="số ô muốn gộp lại với nhau"
LẬP TRÌNH WEB
HTML |
CSS |
JavaScript |
Xem ví dụ
4.3] Tổng hợp một số ví dụ khác để rút kinh nghiệm
Họ tên thí sinhNgày sinhGiới tínhKết quả thi
ToánLýHóa
Trần Đức Anh
| 03/08/1993
| Nam
| 7.25
| 8.0
| 3.75
|
Kiều Thị Thu Hằng
| 04/09/1991
| Nữ
| 7.0
| 9.0
| 4.75
|
Vương Thị Lê Na
| 06/10/1991
| Nữ
| 6.5
| 9.75
| 2.25
|
STTHọ tênGiới tínhChức vụ
NamNữ
1
| Trần Đức Anh
| X
|
| Lớp Trưởng
|
2
| Kiều Thị Thu Hằng
|
| X
| Lớp Phó
|
3
| Vương Thị Lê Na
|
| X
| Tổ viên
|
STTHọ tênGVHDLịch gặp GVHD
1
| Nguyễn Lê Thu Trang
| Th.S Hồ Sỹ Tuy Đức
| 08/03/2018
|
2
| Nguyễn Thị Diễm
|
3
| Phạm Thị Hồng Đào
|
4
| Nguyễn Thị Kim Sa
| Th.S Phạm Thị Huyền Quyên
| 05/03/2018
|
5
| Lê Thị Trang
|
Bảng điểm lớp 9BToánLýHóa
STTHọ tên
1
| Trần Đức Anh
| 8.5
| 3.0
| 7.75
|
2
| Kiều Thị Thu Hằng
| 10
| 9.25
| 5.75
|
3
| Vương Thị Lê Na
| 2.25
| 6.0
| 7.75
|
| Điểm trung bình cả lớp
|
5] Tạo một cái tiêu đề cho bảng
- Để tạo một cái tiêu đề cho bảng thì chúng ta cần phải đặt thẻ nằm ở vị trí đầu tiên bên trong phần tử
với cú pháp như sau:tiêu đề của cái bảng
- Trong đó, value có thể được xác định dựa theo một trong hai loại giá trị:
top
| - Tiêu đề sẽ nằm phía trên cái bảng.
|
bottom
| - Tiêu đề sẽ nằm phía dưới cái bảng.
|
DANH SÁCH SINH VIÊN
Họ tên
Ngày sinh
Giới tính
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Xem ví dụ
- Lưu ý: Nếu chúng ta không thiết lập thuộc tính align cho thẻ thì tiêu đề của cái bảng sẽ mặc định nằm ở phía trên cái bảng.
- Thuộc tính border dùng để thiết lập độ dày của cái đường viền bao xung quanh bảng & các ô.
|
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
|
- Thuộc tính cellspacing dùng để thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận.
|
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
|
- Lưu ý: Nếu chúng ta không thiết lập thuộc tính cellspacing thì khoảng cách nằm giữa mỗi hai đường viền lân cận sẽ mặc định là 2 pixel.
- Thuộc tính cellpadding dùng để thiết lập khoảng cách vùng đệm bên trong các ô.
|
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
|
- Lưu ý: Nếu chúng ta không thiết lập thuộc tính cellpadding thì khoảng cách vùng đệm bên trong các ô sẽ mặc định là 1 pixel.
- Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng hoặc các ô bên trong bảng.
| - Nếu muốn thiết lập màu nền cho nguyên cái bảng thì ta đặt thuộc tính bgcolor nằm bên trong thẻ - Nếu muốn thiết lập màu nền cho một hàng thì ta đặt thuộc tính bgcolor nằm bên trong thẻ - Nếu muốn thiết lập màu nền cho một ô thì ta đặt thuộc tính bgcolor nằm bên trong thẻ hoặc
|
Họ tên
Ngày sinh
Giới tính
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
Xem ví dụ - Thuộc tính width dùng để thiết lập chiều rộng cho bảng hoặc các ô.
| - Nếu muốn thiết lập chiều rộng cho bảng thì ta đặt thuộc tính width nằm bên trong thẻ - Nếu muốn thiết lập chiều rộng cho một ô thì ta đặt thuộc tính width nằm bên trong thẻ hoặc
|
- Lưu ý: Khi chúng ta thiết lập chiều rộng cho một ô thì mặc định những ô nằm chung cột với ô đó sẽ có cùng một chiều rộng.
Họ tên
Ngày sinh
Giới tính
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
Xem ví dụ
- Thuộc tính height dùng để thiết lập chiều cao cho bảng hoặc các ô.
| - Nếu muốn thiết lập chiều cao cho bảng thì ta đặt thuộc tính height nằm bên trong thẻ - Nếu muốn thiết lập chiều cao cho một ô thì ta đặt thuộc tính height nằm bên trong thẻ hoặc
|
- Lưu ý: Khi chúng ta thiết lập chiều cao cho một ô thì mặc định những ô nằm chung hàng với ô đó sẽ có cùng một chiều cao.
Họ tên
Ngày sinh
Giới tính
Trần Anh Đức |
03/08/1993 |
Nam |
Kiều Thị Thu Hằng |
04/09/1991 |
Nữ |
Vương Thị Lê Na |
06/10/1991 |
Nữ |
Xem ví dụ - Thuộc tính align dùng để canh lề cho nội dung bên trong ô [theo chiều ngang] - Thuộc tính align có thể nhận một trong bốn giá trị sau đây:
left
| - Nội dung bên trong ô sẽ được canh trái.
| center
| - Nội dung bên trong ô sẽ được canh giữa.
| right
| - Nội dung bên trong ô sẽ được canh phải.
| justify
| - Nội dung bên trong ô sẽ được canh đều hai bên trái phải.
|
Cột 1
Cột 2
Cột 3
Cột 4
X |
X |
X |
X |
Xem ví dụ - Lưu ý: Nếu chúng ta đặt thuộc tính align bên trong thẻ | thì tất cả những ô nằm ở hàng đó đều sẽ được canh lề.
Xem ví dụ - Thuộc tính valign dùng để canh lề cho nội dung bên trong ô [theo chiều dọc] - Thuộc tính valign có thể nhận
một trong ba giá trị sau đây:
top
| - Nội dung bên trong ô sẽ được canh nằm ở trên.
| middle [mặc định]
| - Nội dung bên trong ô sẽ được canh nằm ở giữa.
| bottom
| - Nội dung bên trong ô sẽ được canh nằm ở dưới.
|
Xem ví dụ - Lưu ý: Nếu chúng ta đặt thuộc tính valign bên trong thẻ thì tất cả những ô nằm ở hàng đó đều sẽ được canh lề.
Xem ví dụ
|
|