Cách tạo bảng (table) trong HTML

Cách tạo bảng (table) trong HTML

Cách tạo bảng (table) trong HTML

Dưới đây là ví dụ về một cái bảng:

HTML/CSS JavaScript Server Side
HTML jQuery PHP
CSS Ajax MySQL
Bootstrap 3 Angularjs ASP.NET

Cách tạo bảng

Để tạo một cái bảng, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <table></table> để tạo một cái bảng.

<table>	
</table>

Bước 2: Dùng cặp thẻ <tr></tr> để tạo hàng cho bảng (một cặp thẻ <tr></tr> tương ứng với một hàng)

<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>

Bước 3: Đặt cặp thẻ <td></td> vào bên trong cặp thẻ <tr></tr> để tạo ô cho hàng (một cặp thẻ <td></td> tương ứng với một ô). Cuối cùng, thêm thuộc tính border với giá trị 1px vào bên trong thẻ <table> để tạo đường viền cho bảng.

<table border="1px">
    <tr>
        <td>HTML</td>
        <td>jQuery</td>
        <td>PHP</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Ajax</td>
        <td>MySQL</td>
    </tr>
    <tr>
        <td>Bootstrap 3</td>
        <td>Angularjs</td>
        <td>ASP.NET</td>
    </tr>
</table>

Nếu bạn muốn dùng hàng đầu tiên làm hàng tiêu đề (chữ được tô đậm và đặt ở giữa), thì thay vì dùng cặp thẻ <td></td> đổi lại bạn dùng cặp thẻ <th></th>

<table border="1px">
    <tr>
        <th>HTML</th>
        <th>jQuery</th>
        <th>PHP</th>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Ajax</td>
        <td>MySQL</td>
    </tr>
    <tr>
        <td>Bootstrap 3</td>
        <td>Angularjs</td>
        <td>ASP.NET</td>
    </tr>
</table>

Định dạng cho bảng

Về phần định dạng cho bảng, chúng ta có bốn thuộc tính cơ bản như sau:

Thuộc tính Ý nghĩa
border Thiết lập độ dày của đường viền bao xung quanh bảng
cellpadding Thiết lập khoảng cách giữa nội dung của ô và đường viền của ô
cellspacing Thiết lập khoảng cách giữa hai ô
bgcolor Thiết lập màu nền
  • Nếu đặt bên trong thẻ <table> thì sẽ thiết lập màu nền cho bảng
  • Nếu đặt bên trong thẻ <tr> thì sẽ thiết lập màu nền cho hàng
  • Nếu đặt bên trong thẻ <td> hoặc <th> thì sẽ thiết lập màu nền cho ô
Ví dụ

<table border="5px" cellpadding="30px" cellspacing="20px">
    <tr>
        <td>HTML</td>
        <td>JavaScript</td>
        <td>PHP</td>
    </tr>
    <tr bgcolor="yellow">
        <td>CSS</td>
        <td>jQuery</td>
        <td>MySQL</td>
    </tr>
    <tr>
        <td>Bootstrap 3</td>
        <td>Ajax</td>
        <td bgcolor="green">ASP.NET</td>
    </tr>
</table>

Thiết lập kích thước cho bảng

Về phần thiết lập kích thước cho bảng, chúng ta có thể thiết lập:

  • Chiều rộng cho bảng (Bằng cách đặt thuộc tính width vào bên trong thẻ <table>)
  • Chiều rộng cho ô (Bằng cách đặt thuộc tính width vào bên trong thẻ <td> hoặc <th>)
  • Chiều cao cho bảng (Bằng cách đặt thuộc tính height vào bên trong thẻ <table>)
  • Chiều cao cho hàng (Bằng cách đặt thuộc tính height vào bên trong thẻ <tr>)

Kích thước có thể được xác định theo đơn vị:

  • px (Pixel)
  • hoặc
  • % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: phần tử chứa bảng table có chiều rộng là 800px, ta thiết lập chiều rộng cho bảng là 50% thì khi hiển thị ra màn hình bảng sẽ có chiều rộng là 400px)
Ví dụ

<table border="1px" cellpadding="0px" cellspacing="0px" width="100%">
    <tr>
        <td width="50px">HTML</td>
        <td>HTML</td>
        <td>HTML</td>
        <td width="50%">HTML</td>
    </tr>
    <tr height="200px">
        <td>HTML</td>
        <td>HTML</td>
        <td>HTML</td>
        <td>HTML</td>
    </tr>
</table>

Canh lề nội dung của ô

Để canh lề nội dung cho ô, ta thêm thuộc tính align vào trong thẻ <td> hoặc <th> với các giá trị như sau:

  • left (Canh nội dung nằm bên trái ô)
  • center (Canh nội dung nằm ở giữa ô)
  • right (Canh nội dung nằm bên phải ô)
Ví dụ

<table border="1px" cellpadding="0px" cellspacing="0px" width="100%">
    <tr>
        <td>HTML</td>
        <td align="center">HTML</td>
        <td align="right">HTML</td>
    </tr>
</table>

Lưu ý: Nếu ta đặt thuộc tính align vào bên trong thẻ <tr> thì tất cả các ô của hàng đó sẽ có cùng một kiểu canh lề.

Gộp các ô trong bảng

STT MSSV Họ tên Ngày tháng năm sinh
Ngày Tháng Năm
1 1111xxxx Nguyễn Thành Nhân 31 12 1990
2 1111xxxx Web cơ bản 30 11 1991

Để gộp các cột lại với nhau ta đặt thuộc tính colspan="số lượng cột muốn gộp" vào trong thẻ <th> hoặc <td>

Để gộp các hàng lại với nhau ta đặt thuộc tính rowspan="số lượng hàng muốn gộp" vào trong thẻ <th> hoặc <td>

Ví dụ

<table border="1px" cellspacing="0px" width="100%">
    <tr>
        <th rowspan="2">STT</th>
        <th rowspan="2">MSSV</th>
        <th rowspan="2">Họ tên</th>
        <th colspan="3">Ngày tháng năm sinh</th>
    </tr>
    <tr>
        <th>Ngày</th>
        <th>Tháng</th>
        <th>Năm</th>
    </tr>
    <tr>
        <td>1</td>
        <td>1111xxxx</td>
        <td>Nguyễn Thành Nhân</td>
        <td>31</td>
        <td>12</td>
        <td>1990</td>
    </tr>
    <tr>
        <td>2</td>
        <td>1111xxxx</td>
        <td>Web cơ bản</td>
        <td>30</td>
        <td>11</td>
        <td>1991</td>
    </tr>
</table>

Tạo tiêu đề cho bảng

Để tạo tiêu đề nằm phía trên bảng, ta sử dụng <caption align="top">Nội dung tiêu đề</caption>

Để tạo tiêu đề nằm phía dưới bảng, ta sử dụng <caption align="bottom">Nội dung tiêu đề</caption>

Ví dụ

<table border="1px" cellpadding="0px" cellspacing="0px" width="50%">
    <caption align="bottom">LẬP TRÌNH WEB</caption>
    <tr>
        <td>HTML</td>
        <td>HTML</td>
        <td>HTML</td>
    </tr>
    <tr>
        <td>HTML</td>
        <td>HTML</td>
        <td>HTML</td>
    </tr>
</table>

Cách tạo bảng (table) trong HTML

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi