Cách tạo bảng (table) trong HTML

Cách tạo một cái bảng (table) trong HTML

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ữ

Dương Kim Thương
16/11/1990
Nam

Mai Đức Hiếu
18/06/1989
Nam

– Tính đến thời gian này thì chắc những bạn cũng đã quá quen thuộc với hình dạng của một cái bảng rồi, do đó tôi không cần phải lý giải lại khái niệm bảng là gì nữa, mà tất cả chúng ta sẽ đi thẳng vào việc tìm hiểu và khám phá cách tạo một cái bảng luôn .

1) Các thẻ được sử dụng trong việc tạo bảng

– Thông thường, để tạo được một cái bảng thì tất cả chúng ta cần phải sử dụng bốn loại thẻ :

dùng để xác định một hàng bên trong bảng.
  • Thẻ
  • Thẻ
  • 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ữ

    Dương Kim Thương
    16/11/1990
    Nam

    Mai Đức Hiếu
    18/06/1989
    Nam

    – Ví dụ: Cái bảng bên trái có sáu hàng tương ứng với sáu phần tử

    , hàng đầu tiên có ba ô tiêu đề tương ứng với ba phần tử

    – Lưu ý : Ô tiêu đề là loại ô mà văn bản nằm bên trong nó mặc định được tô đậm và canh giữa .

    2) Cách thức tạo một cái bảng

    – Để tạo một cái bảng thì tất cả chúng ta nên thực thi lần lượt những bước như sau :

    • 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 ô.

    Ví dụ :
    Họ tênNgày sinhGiới tínhTrần Anh Đức03/08/1993NamKiều Thị Thu Hằng04/09/1991NữVương Thị Lê Na06/10/1991Nữ
    – Để tạo được một cái bảng giống phía trên thì tất cả chúng ta thực thi lần lượt những bước sau :

    Bước 1

    Bước 2

    Bước 3

    Bước 4

    Bước 5

    – Bước 1 : Xác định một cái bảng

    – Trong đó :

    • Thẻ
      dùng để xác định một cái bảng.
    • Thẻ
    dùng để xác định một ô (tiêu đề) bên trong hàng. dùng để xác định một ô (bình thường) bên trong hàng.
    , năm hàng còn lại gồm mười lăm ô bình thường tương ứng với mười lăm phần tử

    – 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 .

    (vì có tổng cộng bốn hàng nên tôi sử dụng bốn phần tử

    )

    – 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 ô thông 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à nhữ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ụ

    3) Các thuộc tính được dùng trong việc tạo bảng

    – Dưới đây là list 1 số ít thuộc tính thường được vận dụng trong việc tạo bảng .
    ( những bạn vui mắt tấm vào hình để khám phá chi tiết cụ thể tính 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à những ô .

    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 những ô .

    bgcolor

    – Thiết lập màu nền cho bảng hoặc những ô .

    width

    – Thiết lập chiều rộng cho bảng hoặc những ô .

    height

    – Thiết lập chiều cao cho bảng hoặc những ô .

    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 quan trọng, tất cả 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ên
    Giới tính
    Kết quả thi

    Toán

    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ì tất cả chúng ta cần phải gộp những ô lại với nhau .

    4.1) Gộp các ô theo chiều ngang

    – Để gộp những ô theo chiều ngang thì tất cả chúng ta đặt thuộc tính colspan vào bên trong thẻ mở của cái ô mà ta muốn mở màn 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"

    Ví dụ :

    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 những ô theo chiều dọc thì tất cả chúng ta đặt thuộc tính rowspan vào bên trong thẻ mở của cái ô mà ta muốn mở màn 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"

    Ví dụ :

    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

    Ví dụ 1 :

    Họ tên thí sinh
    Ngày sinh
    Giới tính
    Kết quả thi

    Toán

    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

    Xem ví dụVí dụ 2 :

    STT
    Họ tên
    Giới tính
    Chức vụ

    Nam
    Nữ

    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

    Xem ví dụVí dụ 3 :

    STT
    Họ tên
    GVHD
    Lị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

    Xem ví dụVí dụ :

    Bảng điểm lớp 9B
    Toán

    Hóa

    STT
    Họ 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

    Xem ví dụ

    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 hoàn toàn có thể được xác lập 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 .
    Ví dụ :

    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 và những ô .

    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 tất cả 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 px .

    – Thuộc tính cellpadding dùng để thiết lập khoảng cách vùng đệm bên trong những ô .

    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 tất cả 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 những ô sẽ mặc định là 1 px .

    – Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng hoặc những ô 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

    Ví dụ :

    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 những ô .

    – 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 tất cả 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 .
    Ví dụ :

    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 những ô .

    – 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 tất cả 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 .
    Ví dụ :

    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 hoàn toàn 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 .
    Ví dụ :

    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ề.

    Ví dụ :

    X X X X
    Y Y Y Y

    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 hoàn toàn 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.

    Ví dụ :

    X X X

    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ề.

    Ví dụ :

    X X X

    Xem ví dụ

    Leave a comment

    Your email address will not be published. Required fields are marked *