Bảng trong HTML

  • Nguyễn Lê Điệp
  • 26-12-2016
  • 149
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Trong HTML một bảng được tạo ra với thẻ table. Mỗi dòng của bảng được xác định bởi thẻ tr. Một tiêu đề bảng được xác định bởi thẻ th. Theo mặc định, tiêu đề bảng được in đậm và nằm chính giữa. Mỗi ô trong bảng được xác được bởi thẻ td. Thẻ td là các thẻ chứa các dữ liệu của bảng có thể là văn bản, hình ảnh,...

    <table style="width:100%">
      <tr>
        <th>Họ</th>
        <th>Tên</th> 
        <th>Tuổi</th>
      </tr>
      <tr>
        <td>Nguyễn</td>
        <td>Điệp</td> 
        <td>24</td>
      </tr>
      <tr>
        <td>Trần</td>
        <td>Diễn</td> 
        <td>22</td>
      </tr>
    </table>
    Xem ví dụ

    Đường viền bảng

    Nếu không xác định đường viền trong bảng thì nó sẽ hiển thị với một dạng bảng không có viền. Đường viền của bảng được xác định bởi thuộc tính border trong CSS.

    table, th, td {
    	border: 1px solid gray;
    }
    Xem ví dụ

    Đường viền đơn của bảng

    Nếu bạn muốn đường viền hiển thị dạng đơn thì bạn có thể thêm thuộc tính border-collapse trong CSS.
    table, th, td {
    	border: 1px solid gray;
    	border-collapse: collapse;
    }
    Xem ví dụ

    Padding bảng

    Thuộc tính này giúp nội dung được cách xa các đường viền của bảng. Bạn có thể thêm thuộc tính padding này vào style của mình

    th, td {
        padding: 20px;
    }
    Xem ví dụ

    Canh lề bảng

    Theo mặc định thì tiêu đề của bảng sẽ được in đậm và nằm ở giữa các ô. Nhưng bạn có thể canh lề bởi thuộc tính text-align trong CSS. Ở ví dụ bên dưới chúng ta canh lề nằm bên trái.
    th {
        text-align: left;
    }
    Xem ví dụ

    Khoảng cách đường viền

    Mặc định trong HTML có khoảng cách đường viền khoảng 1px nhưng chúng ta có thể tăng khoảng cách đó lên với thuộc tính border-spacing trong CSS.
    table {
        border-spacing: 10px;
    }
    Xem ví dụ

    Gộp cột trong bảng

    Để hiển thị nhiều hơn một cột chúng ta có thể sử dụng thuộc tính colspan.
    <table style="width:100%">
      <tr>
        <th>Tên</th>
        <th colspan="2">Số điện thoại</th>
      </tr>
      <tr>
        <td>Điệp</td>
        <td>096.669.59.14</td>
        <td>093.754.17.64</td>
      </tr>
    </table>
    Xem ví dụ

    Gộp hàng trong bảng

    Để hiển thị nhiều hơn một hàng chúng ta có thể sử dụng thuộc tính rowspan.
    <table style="width:100%">
      <tr>
        <th>Tên</th>
        <td>Điệp</td>
      </tr>
      <tr>
        <th rowspan="2">Điện thoại</th>
        <td>096.669.59.14</td>
      </tr>
      <tr>
        <td>093.754.17.64</td>
      </tr>
    </table>
    Xem ví dụ

    Chú thích bảng

    Bạn có thể thêm một chú thích của bảng bằng thẻ <caption>
    <table style="width:100%">
      <caption>Liên hệ Admin</caption>
      <tr>
        <th>Tên</th>
        <th>Số điện thoại</th>
      </tr>
      <tr>
        <td>Điệp</td>
        <td>096.669.59.14</td>
      </tr>
    </table>
    Xem ví dụ

    Style bảng

    Bạn cũng có thể thêm những thuộc tính như id hoặc class vào bảng để định nghĩa style cho nó một cách dễ dàng hơn và không bị trùng lặp style giữa các bảng với nhau
    <table id="tableone">
      <tr>
        <th>Họ</th>
        <th>Tên</th> 
        <th>Tuổi</th>
      </tr>
      <tr>
        <td>Nguyễn</td>
        <td>Điệp</td> 
        <td>24</td>
      </tr>
      <tr>
        <td>Trần</td>
        <td>Diễn</td> 
        <td>22</td>
      </tr>
    </table>
    Và chúng ta có thể thêm kiểu của bảng thông qua thuộc tính id với tên tableone tùy ý bằng một style ngoài phần tử bảng.
    table#tableone tr:nth-child(even) {
        background-color: #yellow;
    }
    table#tableone tr:nth-child(odd) {
       background-color:#fff;
    }
    table#tableone th {
        background-color: blue;
        color: white;
    }
    Xem ví dụ
    Chúc các bạn học tốt!laugh
    Từ khóa:

    Bảng trong HTML

    Bảng trong HTML

    Bảng trong HTML

    Bảng trong HTML
    Bảng trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    461
    - Hôm qua:
    904
    - Tuần này:
    4.923
    - Tuần trước:
    6.504
    - Tháng này:
    19.080
    - Tháng trước:
    24.702
    - Năm này:
    136.471
    - Năm trước:
    17.373
    - Tổng cộng:
    153.844