Table trong HTML được sử dụng để tạo bảng, bao gồm hàng và cột. Thẻ <table> khá quen thuộc khi học về HTML. Trong bài viết này mình sẽ hướng dẫn bạn cách tạo bảng với tùy chỉnh CSS đẹp mắt.

Cách tạo table HTML

<table border="1">
  <tr>
    <td>
    Ô 1
    </td>
    <td>
    Ô 2
    </td>
  </tr>
  <tr>
    <td>
    Ô 3
    </td>
    <td>
    Ô 4
    </td>
  </tr>
</table>

table-html

Trong <table> có chứa các cặp thẻ <tr></tr> và <td></td>

  • thẻ <tr> để nhóm các <td> thành một dòng
  • thẻ <td> dùng để định nghĩa các ô trong bảng
  • border=”1″ độ rộng của đường viền. Mặc định là 0

Các thẻ dùng để hiển thị bảng

  • thẻ <caption> dùng để định nghĩa tiêu đề cho bảng
  • thẻ <tbody> dùng để bao gói các dòng là phần thân của bảng
  • thẻ <thead> dùng để bao gói các dòng là phần đầu của bảng
  • thẻ <tfooter> dùng để bao gói các dòng là phần cuối của bảng
  • bgcolor thiết lập màu nền
  • width thiết lập chiều rộng
  • height thiết lập chiều cao
  • align canh lề cho nội dung ô (theo chiều ngang)
  • valign canh lề cho nội dung ô (theo chiều dọc)

Thuộc tính Cellpadding và Cellspacing

  • Cellpadding dùng để tạo khoảng rộng của border
  • Cellspacing dùng để tạo khoảng cách giữa các ô

table-html1

Kết quả:

table-html2

Thuộc tính colspan và rowspan

  • colspan dùng để nhập nhiều ô thành một cột
  • rowspan dùng để nhập nhiều hàng thành một hàng

Cũng với ví dụ trên bạn thêm

<tr>
    <td colspan="2">
    Ô 5
    </td>
  </tr>

Vào cuối cùng

table-html3

Kết quả ô thứ 5 có chiều rộng bằng 2 ô phía trên

table-html4

Viết CSS cho table

table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}

Trong đó:

  • border: 1px solid black; thiết lập độ rộng cho đường viền là 1px, solid là kiểu border.
  • border-collapse: collapse;  loại bỏ khoảng trống của bảng

Code table HTML đẹp

<style>
.b-table {
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1em;
    min-width: 500px;
    box-shadow: 0 0 20px rgb(64 64 64 / 24%);
}
.b-table thead tr {
    background-color: #c50101;
    color: #ffffff;
    text-align: left;
}
.b-table th,
.b-table td {
    padding: 12px 15px;
}
.b-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.b-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.b-table tbody tr:last-of-type {
    border-bottom: 2px solid #d10030;
}
.b-table tbody tr.active-row {
    font-weight: 700;
    color: #d10030;
}
</style>
<table class="b-table">
    <thead>
        <tr>
            <th>Tên</th>
            <th>Điểm</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Nam</td>
            <td>5000</td>
        </tr>
        <tr class="active-row">
            <td>Hoàng</td>
            <td>6000</td>
        </tr>
    </tbody>
</table>

table-html5

Với bài viết về cách Table trong HTML trên đây mình đã hướng dẫn bạn tạo bảng đơn giản nhất với các thẻ <tr>, <td>… Bên cạnh đó cũng có ví dụ về table đẹp. Sau khi đọc xong bạn hãy thực hành bằng cách thử làm một bảng thêm mã CSS nhé.

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *