Cách tạo một cái bảng (table) trong HTML

– Tính đến thời điểm này thì chắc các bạn cũng đã quá quen thuộc với hình dạng của một cái bảng rồi,
cho nên tôi không cần phải giải thích lại khái niệm bảng là gì nữa,
mà chúng ta sẽ đi thẳng vào việc tìm hiểu cách tạo một cái bảng luôn.

1) Các thẻ được sử dụng trong việc tạo bảng

– Thông thường, để tạo được một cái bảng thì chúng ta cần phải sử dụng bốn loại thẻ:

– Trong đó:

• Thẻ <table> dùng để xác định một cái bảng.
• Thẻ <tr> dùng để xác định một hàng bên trong bảng.
• Thẻ <th> dùng để xác định một ô (tiêu đề) bên trong hàng.
• Thẻ <td> dùng để xác định một ô (bình thường) bên trong hàng.

– Ví dụ: Cái bảng bên trái có sáu hàng tương ứng với sáu phần tử <tr>, hàng đầu tiên có ba ô tiêu đề tương ứng với ba phần tử <th>, năm hàng còn lại gồm mười lăm ô bình thường tương ứng với mười lăm phần tử <td>

– Lưu ý: Ô tiêu đề là loại ô mà văn bản nằm bên trong nó mặc định được tô đậm & canh giữa.

2) Cách thức tạo một cái bảng

– Để tạo một cái bảng thì chúng ta nên thực hiện lần lượt các bước như sau:

• Bước 1: Xác định một cái bảng.
• Bước 2: Xác định số hàng nằm bên trong bảng.
• Bước 3: Xác định số ô nằm bên trong mỗi hàng.
• Bước 4: Xác định nội dung của từng ô.
• Bước 5: Thiết lập thuộc tính border với giá trị 1 để tạo đường viền cho bảng và các ô.

Ví dụ:

– Để tạo được một cái bảng giống phía trên thì chúng ta thực hiện lần lượt các bước sau:

<table></table>

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

<table>
   <tr>
      <th></th>
      <th></th>
      <th></th>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

<table>
   <tr>
      <th>Họ tên</th>
      <th>Ngày sinh</th>
      <th>Giới tính</th>
   </tr>
   <tr>
      <td>Trần Anh Đức</td>
      <td>03/08/1993</td>
      <td>Nam</td>
   </tr>
   <tr>
      <td>Kiều Thị Thu Hằng</td>
      <td>04/09/1991</td>
      <td>Nữ</td>
   </tr>
   <tr>
      <td>Vương Thị Lê Na</td>
      <td>06/10/1991</td>
      <td>Nữ</td>
   </tr>
</table>

<table border="1">
   <tr>
      <th>Họ tên</th>
      <th>Ngày sinh</th>
      <th>Giới tính</th>
   </tr>
   <tr>
      <td>Trần Anh Đức</td>
      <td>03/08/1993</td>
      <td>Nam</td>
   </tr>
   <tr>
      <td>Kiều Thị Thu Hằng</td>
      <td>04/09/1991</td>
      <td>Nữ</td>
   </tr>
   <tr>
      <td>Vương Thị Lê Na</td>
      <td>06/10/1991</td>
      <td>Nữ</td>
   </tr>
</table>

3) Các thuộc tính được dùng trong việc tạo bảng

– Dưới đây là danh sách một số thuộc tính thường được áp dụng trong việc tạo bảng.

(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)

4) Cách gộp các ô bên trong bảng lại với nhau

– Thông thường, khi tạo một cái bảng thì số ô trên mỗi hàng phải bằng nhau. Tuy nhiên, có một vài trường hợp đặc biệt, chúng ta cần phải tạo ra những cái bảng mà số ô trên mỗi hàng có sự hơn kém nhau.

– Để làm được điều đó thì chúng ta cần phải gộp các ô lại với nhau.

4.1) Gộp các ô theo chiều ngang

– Để gộp các ô theo chiều ngang thì chúng ta đặt thuộc tính colspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải.

– Cú pháp:

colspan="số ô muốn gộp lại với nhau"

<table border="1">
    <tr>
        <th colspan="3">THÔNG TIN SINH VIÊN</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

4.2) Gộp các ô theo chiều dọc

– Để gộp các ô theo chiều dọc thì chúng ta đặt thuộc tính rowspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía dưới.

– Cú pháp:

rowspan="số ô muốn gộp lại với nhau"

<table border="1">
    <tr>
        <th rowspan="3">LẬP TRÌNH WEB</th>
        <td>HTML</td>
    </tr>
    <tr>
        <td>CSS</td>
    </tr>
    <tr>
        <td>JavaScript</td>
    </tr>
</table>

4.3) Tổng hợp một số ví dụ khác để rút kinh nghiệm

5) Tạo một cái tiêu đề cho bảng

– Để tạo một cái tiêu đề cho bảng thì chúng ta cần phải đặt thẻ <caption> nằm ở vị trí đầu tiên bên trong phần tử <table> với cú pháp như sau:

<caption align="value">tiêu đề của cái bảng</caption>

– Trong đó, value có thể được xác định dựa theo một trong hai loại giá trị:

<table border="1">
    <caption align="bottom">DANH SÁCH SINH VIÊN</caption>
    <tr>
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
</table>

– Lưu ý: Nếu chúng ta không thiết lập thuộc tính align cho thẻ <caption> thì tiêu đề của cái bảng sẽ mặc định nằm ở phía trên cái bảng.

<table border="1">
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

<table border="1" cellspacing="2">
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

<table border="1" cellpadding="1">
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

<table border="1" bgcolor="yellow">
    <tr bgcolor="red">
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td bgcolor="green">Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

<table border="1" width="550">
    <tr width="50%">
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

<table border="1" height="400">
    <tr height="75%">
        <th>Họ tên</th>
        <th>Ngày sinh</th>
        <th>Giới tính</th>
    </tr>
    <tr>
        <td>Trần Anh Đức</td>
        <td>03/08/1993</td>
        <td>Nam</td>
    </tr>
    <tr>
        <td>Kiều Thị Thu Hằng</td>
        <td>04/09/1991</td>
        <td>Nữ</td>
    </tr>
    <tr>
        <td>Vương Thị Lê Na</td>
        <td>06/10/1991</td>
        <td>Nữ</td>
    </tr>
</table>

<table border="1" width="1000">
   <tr>
      <th width="25%">Cột 1</th>
      <th width="25%">Cột 2</th>
      <th width="25%">Cột 3</th>
      <th width="25%">Cột 4</th>
   </tr>
   <tr>
      <td align="left">X</td>
      <td align="center">X</td>
      <td align="right">X</td>
      <td align="justify">X</td>
   </tr>
</table>

<table border="1" width="500">
   <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
      <td>X</td>
   </tr>
   <tr align="center">
      <td>Y</td>
      <td>Y</td>
      <td>Y</td>
      <td>Y</td>
   </tr>
</table>

<table border="1" height="400">
   <tr>
      <td valign="top">X</td>
      <td valign="middle">X</td>
      <td valign="bottom">X</td>
   </tr>
</table>

<table border="1" height="400">
   <tr valign="top">
      <td>X</td>
      <td>X</td>
      <td>X</td>
   </tr>
</table>