Bạn có thể phần tử TABLE để trình bày dữ liệu theo dạng bảng. Một bảng được cấu thành bởi các hàng(row), và cột(column), . Giao của mỗi hàng và cột được gọi là ô(cell). Theo mặc định, một bảng không có viền
NexTGen Web Bài 05: Tạo bảng Mục tiêu Tạo định dạng bảng Kích thước bảng độ rộng cột Cách gộp ô bảng Bố cục trang sử dụng bảng © Aptech Ltd. Bảng Bạn phần tử TABLE để trình bày liệu theo dạng bảng. Một bảng cấu thành hàng(row), cột(column), . Giao hàng cột gọi ô(cell). Theo mặc định, bảng viền © Aptech Ltd. Các phần tử tạo bảng … : Phần tử tạo bảng … : Tạo dòng thích để mô tả bảng. Được đặt sau thẻ mở … : Phần tử tạo dòng cho bảng … : Phần tử tạo ô cho dòng … : Tạo tiêu đề cho cột, cho dòng © Aptech Ltd. Cách tạo bảng Ví dụ TABLE Column 1 Column 2 Cell 1, Rows 1 Cell 2, Rows 1 Cell 1, Rows 2 Cell 2, Rows 2 © Aptech Ltd. Thuộc tính phần tử Border=n: đặt độ rộng đường viền, với n>0 bảng có khung viền Bgcolor=“giá_trị_màu”: đặt màu cho bảng. Giá trị hệ thập lục phân Width, Height: Đặt kích thước chiều rộng, chiều cao cho bảng. CellSpacing: khoảng ô bảng CellPadding: khoảng câch đường viền ô với nội dung văn đặt ô …… © Aptech Ltd. Thuộc tính lề phần tử valign: canh lề nội dung ô theo chiều dọc. HTML5 ngăn cấm thuộc tính align. align: canh lề nội dung theo chiều ngang. HTML5 ngăn cấm thuộc tính align Align Align Align Align = = = = left center right justify Valign = top Valign = middle Valign = bottom Data Cell 1và Để thiết lập lề ta sử dụng kiểu text-align vertical align css Ngoài có thuộc tính: bgcolor, width, height,. © Aptech Ltd. Thuộc tính colspan rowspan Thuộc tính COLSPAN ROWSPAN phần tử TD TH sử dụng để ghép ô liền kề dòng hay cột thành ô. Rowspan=n: ghép n ô nằm cột Colspan=n: ghép n ô nằm hàng © Aptech Ltd. Thuộc tính colspan rowspan Ví dụ cell cell rowspan=3 cell cell colspan=2 colspan=2 cell cell cell cel © Aptech Ltd. Phần tử THEAD, TFOOT, TBODY Ba phần tử dùng để chia bảng thành ba vùng. THEAD định nghĩa vùng tiêu đề. TFOOT định nghĩa vùng chân tiêu đề. TBODY định nghĩa vùng thân bảng © Aptech Ltd. Phần tử THEAD, TFOOT, TBODY Ví dụ Student Name Grand Total (Out of 500) Percentage Total Student 4 © Aptech Ltd. John 450 90% Linda 400 80% Marry 460 92% Áp dụng viền sử dụng style 1-2 CSS sử dụng cho việc áp dụng viền phương pháp đáng tin cậy linh hoạt nhất. Có thể định dạng bảng cách sử dụng style cho thẻ . border-width: • Quy định độ dày viền giá trị quy định điểm ảnh. border-color: • Chỉ màu viền với giá trị tên màu giá trị RGB value, hệ số 16. border-style: • Chỉ kiểu đường viền giá trị sau: solid, dashed, groove, dotted, outset, ridge, inset, or none. © Aptech Ltd. Áp dụng viền sử dụng style 2-2 Để thiết lập tất thuộc tính thời điểm người dùng sử dụng thuộc tính viền đặt thiết lập theo thứ tự chiều rộng, màu sắc kiểu tương ứng. Để định dạng phía riêng biệt, thay thuộc tính border thuộc tính border-bottom, border-top, border-right, or border-left. Người dùng áp dụng style cho ô đơn lẻ toàn bảng cách style vùng thẻ . © Aptech Ltd. Bố cục trang sử dụng bảng 1-5 Bảng sử dụng cho cấu trúc nội dung tổ chức liệu cách thích hợp. Bảng cho phép người dùng xếp liệu theo chiều ngang theo chiều dọc theo yêu cầu. Mỗi trang web có cách để trình bày liệu cho khách hàng người sử dụng chúng. Nhiều trang web sử dụng cửa sổ pop-up cung cấp thông tin cho khách hàng họ. Ví dụ. Page Layout © Aptech Ltd. Bố cục trang sử dụng bảng 2-5 © Aptech Ltd. #navlayout { width: 100%; float: left; margin: 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } #navlayout li { float: left; } #navlayout li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; Bố cục trang sử dụng bảng 3-5 Blossoms Gallery The Best sellers for flowers since 1979 Home Contact Us About Us FAQs Flowers are now in stock! We have just received a large shipment of flowers with prices as low as $19. © Aptech Ltd. [...]... Ltd Bố cục trang sử dụng bảng 2-5 © Aptech Ltd #navlayout { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } #navlayout li { float: left; } #navlayout li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; Bố cục trang sử dụng bảng 3-5 . / Tạo bảng Áp dụng viền sử dụng style 2-2 © Aptech Ltd. 14 HTML5 / Tạo bảng Bố cục trang sử dụng bảng 1-5 Bảng được sử dụng cho cấu trúc nội dung và tổ chức dữ liệu một cách thích hợp. Bảng. </table> </body </html> © Aptech Ltd. 17 HTML5 / Tạo bảng Bố cục trang sử dụng bảng 5-5 © Aptech Ltd. 18 HTML5 / Tạo bảng Tổng kết Bảng cho phép người dùng xem các dữ liệu của bạn. Aptech Ltd. 15 HTML5 / Tạo bảng Bố cục trang sử dụng bảng 2-5 #navlayout { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px