Các thẻ định dạng bảng

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ẻ:

<table>

<tr>

<th>

<td>

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.

Họ tên	Ngày sinh	Giới tính
Trần Anh Đức	03/08/1993	Nam
Kiều Thị Thu Hằng	04/09/1991	Nữ
Vương Thị Lê Na	06/10/1991	Nữ
Dương Kim Thương	16/11/1990	Nam
Mai Đức Hiếu	18/06/1989	Nam

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ử , hàng đầu tiên có ba ô tiêu đề tương ứng với ba phần tử , 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ử

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.

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ụ:

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

Để 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:

Bước 1:

<table></table>

Bước 2:

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

Bước 3:

<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>

Bước 4:

<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>

Bước 5:

<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>

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

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"

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"