Đang tải... (xem toàn văn)
Cách chèn định dạng kiểu bảng trong HTML bài 6 Người đăng: Chiến Thần Ngày: 27122016 Trong bài viết ngày hôm nay mình xin giới thiệu với các bạn cách tạo bảng biểu table trong html. Với cách tạo bảng biểu bạn có thể bố trí dữ liệu trên các dòng và các cột khác nhau – điều này cũng tạo lên sự sinh động cho website của bạn. Đã làm web thì nhất định bạn sẽ đụng chạm tới vấn đề: tạo cấu trúc dạng bảng table Học HTML Cách chèn định dạng kiểu bảng trong html 1. Cách tạo bảng biểu Để chèn bảng biểu table trong HTML bạn dùng thẻ Table gồm có dòng và cột: Một dòng trong bảng được nhận biết qua thẻ . Một cột trong bảng được nhận biết qua thẻ . Một số table còn có tiêu đề. Lúc đó, bạn có thể dùng thẻ thay thẻ ở dòng đầu tiên. Mục đích là để đặt tiêu đề cho cột. Ví dụ: Họ và tên Tuổi Quê quán Nguyễn Văn Tài 20 Hà Nam Phạm Hồng Hoa 22 Vĩnh Yên Xem demo 2. Thêm border (đường viền) cho bảng Nếu bạn không thêm border cho bảng thì bảng sẽ được hiển thị mà không có border. Để tạo border cho bảng, bạn có thể sử dụng css hoặc thuộc tính border của thẻ . Tuy nhiên thông thường các bạn nên tạo border cho bảng bằng các thuộc tính css. Ví dụ tạo border cho bảng bằng css: table, th, td { border: 1px solid black; } Xem demo Ví dụ tạo border cho bảng bằng thuộc tính border của thẻ Họ và tên Tuổi Quê quán Nguyễn Văn Tài 20 Hà Nam Phạm Hồng Hoa 22 Vĩnh Yên Xem demo 3. Collapsed Borders Qua ví dụ tạo border cho bảng bằng thuộc tính css bạn có thể nhận thấy rằng giữa mỗi border của các cột có một khoảng cách nhỏ, và để bỏ đi khoảng cách này bạn sử dụng thuộc tính css: bordercollapse. Ví dụ: table, th, td { border: 1px solid black; bordercollapse: collapse; } Xem demo 4. Tạo khoảng cách giữa cách cột Để tạo khoảng cách giữa dữ liệu và border của các cột trong bảng bạn sử dụng thuộc tính css padding. Mặc định khi tạo bảng, dữ liệu trong các cột sẽ nằm sát với border của các cột. Và điểm đặc biệt của các cột, dòng trong bảng là chúng không nhận thuộc tính margin của css bạn nhé. Ví dụ: th, td { padding: 15px; } Xem demo 5. Trộn các cột Để trộn các cột (merge cell) trong bảng bạn sử dụng thuộc tính colspan. Ví dụ: Họ và tên Số điện thoại Nguyễn Thị Tuyết 0934567889 0234567892 Nguyễn Văn Hào 0934569879 0948572958 Xem demo 6. Trộn các dòng Để trộn các dòng (merge row) trong bảng bạn sử dụng thuộc tính rowspan. Ví dụ: Họ và tên Nguyễn Thị Tuyết Số điện thoại 0934567889 0234567892 Xem demo 7. Tạo tiêu đề (caption) cho bảng Để tạo tiêu đề cho bảng bạn sử dụng thẻ và thẻ này phải nằm ngay sau thẻ . Ví dụ: Điểm thi kỳ I Họ và tên Toán Lý Nguyễn Văn A 9 10 Nguyễn Văn A 7 8 Xem demo 8. Một số lưu ý Có một số điểm đặc biệt của table đó là: Dự liệu giữa các cột sẽ được căn giữa theo chiều dọc. Xem demo Để căn chỉnh dữ liệu giữa các cột theo chiều dọc, bạn sử dụng thuộc tính css verticalalign. Thuộc tính này có 3 giá trị đó là: top, middle, bottom. Ví dụ: td{ verticalalign:top; } Xem demo Độ rộng của bảng: Nếu bạn không đặt độ rộng của bảng, thì độ rộng của bảng sẽ bằng độ rộng của dữ liệu trong cột. Ví dụ: Họ và tên Điện thoại Nguyễn Văn A 0977767789 Nguyễn Văn A 9987867676 Xem demo Để đặt độ rộng cho bảng bạn có thể sử dụng thuộc tính width của thẻ hoặc bằng thuộc tính width của css. Thông thường các bạn nên đặt bằng css nhé. Ví dụ: table{ width:100%; } Xem demo Các thẻ là các thẻ chứa dữ liệu của bảng. Chúng có thể là text, image, danh sách, hoặc là 1 bảng khác… Lời kết Với sự đa dạng của thẻ , kết thúc bài học này bạn đã có thể tạo cho mình một site với layout đơn giản. Chúc các bạn thành công với thử nghiệm của mình nhé.
Cách chèn định dạng kiểu bảng HTML [bài 6] Người đăng: Chiến Thần - Ngày: 27/12/2016 Trong viết ngày hơm xin giới thiệu với bạn cách tạo bảng biểu - table html Với cách tạo bảng biểu bạn bố trí liệu dòng cột khác – điều tạo lên sinh động cho website bạn Đã làm web định bạn đụng chạm tới vấn đề: tạo cấu trúc dạng bảng - table Cách tạo bảng biểu Để chèn bảng biểu - table HTML bạn dùng thẻ Table gồm có dòng cột: Một dòng bảng nhận biết qua thẻ Một cột bảng nhận biết qua thẻ Một số table có tiêu đề Lúc đó, bạn dùng thẻ thay thẻ dòng Mục đích để đặt tiêu đề cho cột Ví dụ: Họ tên Tuổi Quê quán Nguyễn Văn Tài 20 Hà Nam Phạm Hồng Hoa 22 Vĩnh Yên Xem demo Thêm border (đường viền) cho bảng Nếu bạn không thêm border cho bảng bảng hiển thị mà khơng có border Để tạo border cho bảng, bạn sử dụng css thuộc tính border thẻ Tuy nhiên thông thường bạn nên tạo border cho bảng thuộc tính css Ví dụ tạo border cho bảng css: table, th, td { border: 1px solid black; } Xem demo Ví dụ tạo border cho bảng thuộc tính border thẻ Họ tên Tuổi Quê quán Nguyễn Văn Tài 20 Hà Nam Phạm Hồng Hoa 22 Vĩnh Yên Xem demo Collapsed Borders Qua ví dụ tạo border cho bảng thuộc tính css bạn nhận thấy border cột có khoảng cách nhỏ, để bỏ khoảng cách bạn sử dụng thuộc tính css: border-collapse Ví dụ: table, th, td { border: 1px solid black; border-collapse: collapse; } Xem demo Tạo khoảng cách cách cột Để tạo khoảng cách liệu border cột bảng bạn sử dụng thuộc tính css padding Mặc định tạo bảng, liệu cột nằm sát với border cột Và điểm đặc biệt cột, dòng bảng chúng khơng nhận thuộc tính margin css bạn Ví dụ: th, td { padding: 15px; } Xem demo Trộn cột Để trộn cột (merge cell) bảng bạn sử dụng thuộc tính colspan Ví dụ: Họ tên Số điện thoại Nguyễn Thị Tuyết 0934567889 0234567892 Nguyễn Văn Hào 0934569879 0948572958 Xem demo Trộn dòng Để trộn dòng (merge row) bảng bạn sử dụng thuộc tính rowspan Ví dụ: Họ tên Nguyễn Thị Tuyết Số điện thoại 0934567889 0234567892 Xem demo Tạo tiêu đề (caption) cho bảng Để tạo tiêu đề cho bảng bạn sử dụng thẻ thẻ phải nằm sau thẻ Ví dụ: Điểm thi kỳ I Họ tên Toán Lý Nguyễn Văn A 9 10 Nguyễn Văn A 7 8 Xem demo Một số lưu ý Có số điểm đặc biệt table là: Dự liệu cột theo chiều dọc Xem demo Để chỉnh liệu cột theo chiều dọc, bạn sử dụng thuộc tính css vertical-align Thuộc tính có giá trị là: top, middle, bottom Ví dụ: td{ vertical-align:top; } Xem demo Độ rộng bảng: Nếu bạn không đặt độ rộng bảng, độ rộng bảng độ rộng liệu cột Ví dụ: Họ tên Điện thoại Nguyễn Văn A 0977767789 Nguyễn Văn A 9987867676 Xem demo Để đặt độ rộng cho bảng bạn sử dụng thuộc tính width thẻ thuộc tính width css Thơng thường bạn nên đặt css Ví dụ: table{ width:100%; } Xem demo Các thẻ thẻ chứa liệu bảng Chúng text, image, danh sách, bảng khác… Lời kết Với đa dạng thẻ , kết thúc học bạn tạo cho site với layout đơn giản Chúc bạn thành cơng với thử nghiệm ... demo Tạo khoảng cách cách cột Để tạo khoảng cách liệu border cột bảng bạn sử dụng thuộc tính css padding Mặc định tạo bảng, liệu cột nằm sát với border cột Và điểm đặc biệt cột, dòng bảng chúng khơng... cho bảng Nếu bạn không thêm border cho bảng bảng hiển thị mà khơng có border Để tạo border cho bảng, bạn sử dụng css thuộc tính border thẻ Tuy nhiên thông thường bạn nên tạo border cho bảng. .. Xem demo Collapsed Borders Qua ví dụ tạo border cho bảng thuộc tính css bạn nhận thấy border cột có khoảng cách nhỏ, để bỏ khoảng cách bạn sử dụng thuộc tính css: border-collapse Ví dụ: table,