Tìm hiểu về table trong CSS

Bài học hôm nay mình sẽ cùng tìm hiểu về table trong CSS.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Mình có ví dụ sau (đây cũng là đoạn mã HTML mẫu cho các ví dụ phía sau)

Ví dụ mẫu RUN

<!DOCTYPE html>
<html>
  <body>
    <table>
      <tr>
        <th>Họ Và Tên</th>
        <th>Năm sinh</th>
      </tr>
      <tr>
        <td>Nguyễn Văn A</td>
        <td>1992</td>
      </tr>
      <tr>
        <td>Nguyễn Văn B</td>
        <td>1993</td>
      </tr>
      <tr>
        <td>Nguyễn Văn C</td>
        <td>1994</td>
      </tr>
      <tr>
        <td>Nguyễn Văn D</td>
        <td>1995</td>
      </tr>
      <tr>
        <td>Nguyễn Văn E</td>
        <td>1996</td>
      </tr>
      <tr>
        <td>Nguyễn Văn F</td>
        <td>1992</td>
      </tr>
      <tr>
        <td>Nguyễn Văn A</td>
        <td>1992</td>
      </tr>
    </table>
  </body>
</html>

Kết quả của ví dụ trên khi chưa áp dụng bất cứ CSS nào:

css table html png

Bài viết này được đăng tại [free tuts .net]

Từ kết quả trên ta thấy, khi table chưa áp dụng thuộc tính CSS nào nhìn rất là xấu.. :).. Vậy CSS có những thuộc tính nào để định dạng cho bảng (table) trở nên thân thiện với người dùng hơn. Mình sẽ cùng tìm hiểu một số thuộc tính thường hay sử dụng cho bảng (table) như border, width, height, padding, hover, nth-child, color...

1. Các thuộc tính CSS định dạng bảng

border

border là thuộc tính dùng để thiết lập đường viền cho bảng (table), dòng (tr), ô dữ liệu (td) hay tiêu đề (th).

Ví dụ, mình sẽ thiết lập đường viền cho bảng là màu xanh lá cây.

Ví dụ RUN

table {
     border: 1px solid green;
}

Và kết quả của CSS trên:

css table border table png

Như vậy mình đã thiết lập đường viền màu xanh lá cây cho toàn bộ bảng (table), mình tiếp tục thiết lập đường viền màu xanh lá cây cho td, th

Ví dụ RUN

table, td, th {
    border: 1px solid green;
}

Và kết quả trên:

css table border td th png

Kết quả sau khi thiết lập đường viền (border) cho table, td, th, ta thấy có đường viền dư thừa nhìn rất là xấu. CSS có thuộc tính border-collapse giúp ta loại bỏ đường viền dư thừa đó.

Ví dụ RUN

table {
     border-collapse: collapse;
}

Và kết quả trên:

Kết quả trên có vẽ nhìn đẹp hơn rồi đúng không :). Tuy nhiên nội dung trong bảng khá khít nhau, nhìn rất là rối mắt.

padding

padding là thuộc tính để thiết lập khoảng trắng giữa nội dung (text) của td, th.

Ví dụ, mình sẽ thiết lập thuộc tính padding cho thẻ td, th là 10px.

Ví dụ RUN

td, th {
     padding: 10px;
}

Và kết quả trên:

css table padding png

color, background-color

Color, background-color là 2 thuộc tính cho phép mình có thể thiết lập màu chữ (color), màu nền (background-color) cho td, th.

Ví dụ, mình sẽ thiết lập màu nền (background-color) cho header là xám, màu chữ (color) là màu trắng.

Ví dụ RUN

th {
    background-color: gray;
    color: white;
}

Và kết quả trên:

css table color png

width, height

width, height là 2 thuộc tính cho phép mình thiết lập độ rộng và độ cao cho table, tr, th.

Ví dụ, mình sẽ thiết lập độ rộng (width) cho bảng là 500px, và độ cao (height) cho header là 40px.

Ví dụ RUN

table {
     width: 500px;
}
th {
     height: 40px;
}

Và kết quả trên:

css table width height png

text-align

text-align là thuộc tính cho phép mình chỉnh nội dung sang trái (left), phải (right) hoặc giữa (center) theo chiều ngang.

Ví dụ, mình sẽ chỉnh nội dung cho td là canh giữa

Ví dụ RUN

td {
     text-align: center;
}

Và kết quả trên:

css table text align png

Từ kết quả trên tại sao mình chỉ canh giữa nội dung cho thẻ td mà nội dung của thẻ th cũng canh giữa, đó là thuộc tính text-align của thẻ th có giá trị mặc định là canh giữa (center)

vertical-align

vertical-align là thuộc tính cho phép mình chỉnh nội dung ở trên (top), ở dưới (bottom) hay ở giữa (center) theo chiều dọc.

Ví dụ RUN

 td {
    text-align: center;
    vertical-align: bottom;
    height: 40px;
}

Và kết quả:

css table vertical align png

hover

hover cho phép mình thiết lập các thuộc tính CSS lên table, tr, th, td khi rê chuột vào chúng.

Ví dụ, mình sẽ thiết lập cho màu nền (background-color) là xanh lá cây và màu chữ (color) là màu trắng khi hover lên bất cứ dòng (tr) nào.

Ví dụ RUN

 tr:hover {
      background-color: green;
      color: white;
 }

nth-child

nth-child là thuộc tính cho phép mình thiết lập các thuộc tính CSS lên dòng chẵn (even) hay dòng lẻ (odd).

Ví dụ, mình sẽ thiết lập màu nền (background-color) cho dòng chẵn (even) là màu vàng và màu nền (background-color) cho dòng lẻ (odd) là màu xanh lá cây.

Ví dụ RUN

tr:nth-child(even) {background-color: yellow;}
tr:nth-child(odd) {background-color: green;}

Và kết quả trên:

css table nth child png

2. Lời kết

Như vậy là mình đã giới thiệu một số thuộc tính thường hay sử dụng để định dạng cho bảng (table). Tùy vào mục đích sử dụng của mình mà các bạn vận dụng nhé.

Cuối cùng trong quá trình viết không tránh khỏi sai sót, nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để cho bài viết của mình ngày một tốt hơn.

Tham khảo: w3school.com

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Tìm hiểu về table trong CSS

1. Các thuộc tính CSS định dạng bảng

border

padding

color, background-color

width, height

text-align

vertical-align

hover

nth-child

2. Lời kết

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Thẻ aside trong HTML5

Thẻ hgroup trong HTML5

Thẻ header trong HTML5

Các thẻ HTML tạo form thu thập dữ liệu

Tạo background và đường viền cho thẻ HTML

Tạo menu một cấp bằng HTML đơn giản

Tạo HTML danh sách bài viết đơn giản

Tạo bổ cục layout HTML đơn giản

Phân biệt ID và Class trong HTML

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Phân biệt thẻ HTML Block và Inline

Thuộc tính style trong HTML

Thẻ title trong HTML

Thẻ style trong HTML

Thẻ base trong HTML

Thẻ link trong HTML

Thẻ meta trong HTML

Thẻ script trong HTML

Giới thiệu

Thủ thuật

Link hay

Liên kết