http://vietjack.com/css/index.jsp Copyright © vietjack.com Bảng CSS Bảng công cụ hiển thị liệu rõ ràng hiệu Mặc dù với cơng nghệ (như Kendo UI), việc hiển thị liệu thẻ div thường sử dụng Tuy nhiên, với ứng dụng Webpage nhỏ với lượng liệu hiển thị không lớn sử dụng bảng tiện lợi Chương trình bày cách sử dụng thuộc tính khác CSS để làm cho bảng bạn đẹp Dưới số thuộc tính CSS: • Thuộc tính border sử dụng để thiết lập đường viền cho bảng • Thuộc tính border-collapse xác định đường viền bảng nên vào hợp thành đường viền • Thuộc tính caption-side sử dụng phần tử Theo mặc định, chúng hiển thị phần bên bảng Sử dụng thuộc tính này, bạn xác định vị trí hiển thị phần tử caption • Thuộc tính empty-cells xác định xem có hiển thị đường viền khơng trống • Thuộc tính table-layout cho phép bạn thiết lập layout cho bảng Thuộc tính border-collapse CSS Thuộc tính có hai giá trị collapse separate tương ứng với đường viền nên kết hợp với phân biệt riêng rẽ Ví dụ: table.one {bordercollapse:collapse;} table.two {border-collapse:separate;} td.a { border-style:dotted; border-width:3px; border-color:#000000; padding: 10px; } td.b { border-style:solid; border-width:3px; bordercolor:#333333; padding:10px; } Vi du gia tri collapse Cell A Cell B Vi du gia tri separate Cell A Cell B http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com Kết là: Độ rộng chiều cao bảng CSS Để xác định độ rộng chiều cao cho bảng, bạn sử dụng hai thuộc tính width height CSS Hai thuộc tính nhận giá trị % px Ví dụ table { width: 100%; } th { height: 50px; } Căn chỉnh bảng CSS Căn chỉnh bảng theo chiều ngang CSS Bạn sử dụng thuộc tính text-align để xác định chỉnh nội dung theo chiều ngang bảng Thuộc tính nhận giá trị left, right center Ví dụ: th { text-align: left; } Căn chỉnh bảng theo chiều dọc CSS Để chỉnh bảng theo chiều dọc, bạn sử dụng thuộc tính vertical-align nhận giá trị top, bottom, middle Theo mặc định nội dung bảng có chỉnh dọc với giá trị middle Ví dụ: td { height: 50px; vertical-align: bottom; } Thuộc tính padding CSS Để điều khiển khoảng cách đường viền nội dung bảng, bạn sử dụng thuộc tính padding CSS Giá trị nhận thuộc tính dạng đơn vị px Ví dụ th, td { padding: 15px; text-align: left; } Thuộc tính border-spacing CSS Thuộc tính border-spacing xác định khoảng cách đường viền ô bảng Thuộc tính nhận hai giá trị (có đơn vị độ dài) http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com Nếu cung cấp giá trị, giá trị áp dụng cho đường viền ngang dọc Nếu cung cấp hai giá trị, tương ứng theo thứ tự áp dụng cho đường viền ngang đường viền dọc Ghi Thuộc tính không làm việc Netscape IE6 {border-spacing:10px;} /* If you provide one value */ table.example /* This is how you can provide two values */ table.example {border-spacing:10px; 15px;} Sửa đổi ví dụ xem kết quả: table.one { border-collapse:separate; width:400px; borderspacing:10px; } table.two { bordercollapse:separate; width:400px; border-spacing:10px 50px; } Vi du gia tri separate va borderspacing Cell A Cell B Vi du gia tri separate va borderspacing Cell A Cell B Kết là: Thuộc tính caption-side CSS Theo mặc định, nội dung thẻ sử dụng bảng hiển thị bên bảng Tuy nhiên, để thay đổi vị trí này, bạn sử dụng thuộc tính caption-side CSS Thuộc tính nhận giá trị: top, bottom, left, right Dưới ví dụ minh họa Ghi : Các thuộc tính khơng làm việc trình duyệt IE caption.top {caption-side:top} caption.bottom {caption-side:bottom} caption.left {caption-side:left} caption.right {caption-side:right} Phan Caption se xuat hien o phan ben tren bang Cell A Cell B http://vietjack.com/ Trang chia sẻ các bài học online miễn phí http://vietjack.com/css/index.jsp Copyright © vietjack.com bang Cell B Phan Caption se xuat hien o phan ben duoi Cell A Kết là: Thuộc tính empty-cells CSS Để xác định xem có nên hiển thị đường viền cho ô nội dung, bạn sử dụng thuộc tính empty-cells CSS Thuộc tính nhận giá trị: show, hide inherit Dưới ví dụ minh họa để ẩn đường viền với mà khơng có nội dung table.empty{ width:350px; border-collapse:separate; emptycells:hide; } td.empty{ padding:5px; border-style:solid; border-width:1px; bordercolor:#999999; } Dau de cho cot Dau de cho cot Dau de cho hang Gia tri Gia tri Dau de cho hang Gia tri Kết là: Thuộc tính table-layout CSS Thuộc tính table-layout hỗ trợ bạn điều khiển cách mà trình duyệt nên tạo layout cho bảng Thuộc tính nhận ba giá trị: fixed, auto inherit Dưới ví dụ minh họa khác giá trị thuộc tính table-layout Ghi chú: Nhiều trình duyệt khơng hỗ trợ thuộc tính table.auto { table-layout: auto } table.fixed{ table-layout: fixed } 1000000000000000000000000000 10000000 100 1000000000000000000000000000 10000000 100 Kết là: 10000000000000000 10000000 100 100000000000 100 10000000 http://vietjack.com/ Trang chia sẻ các bài học online miễn phí ... cho bảng, bạn sử dụng hai thuộc tính width height CSS Hai thuộc tính nhận giá trị % px Ví dụ table { width: 100%; } th { height: 50px; } Căn chỉnh bảng CSS Căn chỉnh bảng theo chiều ngang CSS. .. định chỉnh nội dung theo chiều ngang bảng Thuộc tính nhận giá trị left, right center Ví dụ: th { text-align: left; } Căn chỉnh bảng theo chiều dọc CSS Để chỉnh bảng theo chiều dọc, bạn sử dụng thuộc... là: Thuộc tính caption-side CSS Theo mặc định, nội dung thẻ sử dụng bảng hiển thị bên bảng Tuy nhiên, để thay đổi vị trí này, bạn sử dụng thuộc tính caption-side CSS Thuộc tính nhận giá trị: