Hàng tổng của bảng html

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

1) Các thẻ được sử dụng trong quá trình tạo bảng

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

)

- In which

  • Dùng thẻ để xác định một cái bảng
  • Các
  • dùng để xác định một hàng bên trong bảng
  • Các
  • dùng để xác định một ô (tiêu đề) bên trong hàng
  • Các
  • dùng để xác định một ô (bình thường) bên trong hàng

    , hàng đầu tiên có ba ô tiêu đề tương ứng với ba phần tử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ữDương Kim Thương16/11/1990NamMai Đức Hiếu18/06/1989Nam

    - 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ử

    , năm hàng còn lại bao gồm mười chiếc ô bình thường tương ứng với chiếc ô 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 & 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ì chúng ta phải thực hiện lần lượt các bước như sau

    • Bước 1. Specify a table
    • 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 đường viền với giá trị 1 để tạo đường viền cho bảng và các ô

    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ữ

    - To create a table same table on, then we done the times of the followingsteps

    - Bước 1. Specify a table

    - Bước 1. Specify a table

    - Bước 2. Xác định số hàng nằm bên trong bảng

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

- Bước 1. Specify a table

- 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 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. Specify a table

- 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. Specify a table

- 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 đường viền 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 sử dụng trong quá trình 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 quá trình tạo bảng

(các bạn vui lòng ghi 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)

ranh giới

- Thiết lập độ dày của cái đường bao xung quanh bảng và các ô

không gian tế bào

- Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận

đệm di động

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

chiều rộng

- Thiết lập chiều rộng cho bảng hoặc ô

Chiều cao

- Thiết lập chiều cao cho bảng hoặc ô

căn chỉnh

- 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 các ô bên trong bảng lại với nhau

- Thông thường, khi tạo một 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ự khác biệt hơn

Họ tênGiới tínhKết quả thiToánLýHóaTrần Đức AnhNam7. 258. 03. 75Mai Đức HiếuNam7. 09. 04. 75

- Để làm được điều đó thì chúng ta cần phải thu các ô lại với nhau

4. 1) Gop các ô theo chiều ngang

- Để 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 ô đó với các ô nằm 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) Gop các ô theo chiều dọc

- Để 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 ô đó 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ả thiToánLýHóaTrần Đức Anh03/08/1993Nam7. 258. 03. 75Kiều Thị Thu Hằng04/09/1991Nữ7. 09. 04. 75Vương Thị Lệ Na06/10/1991Nữ6. 59. 752. 25

STTHọ tênGiới tínhChức vụNamNữ1Trần Đức AnhXLLớp Trưởng2Kiều Thị Thu HằngXLLớp Phó3Vương Thị Lê NaXTổ ủy viên

STT Họ tên GVHD Lịch gặp GVHD 1 Nguyễn Lê Thu Trang. S Hồ Sỹ Tuy Đức08/03/20182Nguyễn Thị Diễm3Phạm Thị Hồng Đào4Nguyễn Thị Kim SaTh. S Phạm Thị Huyền Quyên05/03/20185Lê Thị Trang

Bảng điểm lớp 9BToánLýHóaSTTHọ tên1Trần Đức Anh8. 53. 07. 752 Kiều Thị Thu Hằng 109. 255. 753Vương Thị Lê Na2. 256. 07. 75Điểm trung bình cả lớp

5) Tạo một 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

- Trong đó, giá trị có thể được xác định dựa trên một trong hai loại giá trị

title of the tabletop

- Tiêu đề sẽ nằm phía trên cái bảng

đáy

- Tiêu đề sẽ nằm phía dưới cái bảng


0Xem ví dụ

- Lưu ý. Nếu chúng ta không thiết lập thuộc tính căn chỉnh 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 ô

1

- Thuộc tính cellspaces dùng để thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận

1

- Lưu ý. Nếu chúng ta không thiết lập thuộc tính cellspaces 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 trống vùng đệm bên trong các ô

1

- 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 bảng nguyên cái 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


4Xem ví dụ

- Thuộc tính chiều rộng được sử dụng để thiết lập chiều rộng cho bảng hoặc ô

thì tất cả những ô nằm trong hàng đó đều sẽ được canh lề


- Nếu muốn thiết lập chiều rộng cho bảng thì ta đặt thuộc tính chiều rộng 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 chiều rộng 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 những ô đó sẽ có cùng một chiều cao