Học HTML – Tạo bảng table trong html

Việc tạo bảng trong một bài viết hoặc 1 tài liệu web cũng rất cần thiết , bạn có thể thấy ngay trên blog của mình nhiều khi mình cũng rất hay sử dụng bảng để diễn tả những nội dung dài. Đối với những người sử dụng wordpress thì việc tạo bảng đã có plugin hỗ trợ, thế nhưng chúng ta đang học để trở thành lập trình viên thì nhưng câu lệnh tạo bảng đơn giản chúng ta cần phải nắm vững.

Ở bài này mình sẽ hướng dẫn bạn cách tạo ra bảng cho tài liệu web của mình, những thẻ tag tạo bảng mình đã giới thiệu ở một bài nằm trong serie học html cơ bản này rồi, nếu bạn chưa đọc có thể đọc lại nhé.

>Tổng hợp các thẻ tag trong html và html 5

Cú pháp tạo bảng cơ bản

<table border="1">
  <tr>
    <th>Tên</th>
    <th>Trình độ</th>
    <th>Tuổi</th>
  </tr>
  <tr>
    <td>Bảo</td>
    <td>Học CĐ</td>
    <td>23 tuổi</td>
  </tr>
  <tr>
    <td>Hùng</td>
    <td>Học ĐH</td>
    <td>22 tuổi</td>
  </tr>
</table>

Giải thích: 

<table></table> khai báo tạo 1 bảng với tài liệu web, bên trong thẻ <table> mở nó sẽ nhận các thuộc tính sytle bạn có thể viết trực tiếp trong đó, không cần thông qua cú pháp style="" .

<tr></tr> Tạo hàng của bảng, muốn có báo nhiêu hàng thì chỉ cần viết lặp lại cặp thẻ này là được.

<th></th> Tạo tiêu đề cho từng ô trong bảng, nó dùng để giải thích bổ nghĩa cho các ô bên dưới bạn muốn viết cái gì. Thông thường nó sẽ được khai báo ở đầu bảng và số lượng khai báo thường trùng với các cặp thẻ <td></td> .

<td></td> Tạo dữ liệu của bảng , nó sẽ hiển thị từ trái sang phái trên mỗi dòng của bảng . Nghĩa là nó cặp thẻ này nằm trong cặp thẻ <tr></tr> . Nó có thể chứa văn bản, hình ảnh, danh sách, bảng khác…

Thông thường để tạo 1 bảng phức tạp các bạn chỉ cần lồng ghép các thuộc tính vào trong bảng, ví dụ ở đây tôi có 1 bảng cũng khá đẹp có kết hợp rất nhiều thuộc tính.

Cột 1 Cột 2 Cột 3
Dòng 1 cột 1 Dòng 1 cột 2 Dòng 1 cột 3
Dòng 2 cột 2 Dòng 2 cột 3
Dòng 3 cột 1

Bạn có thể xem đoạn code bên dưới này và mổ xẻ nó ra từng chi tiết 1 thì sẽ rõ nhé, thực sự rất dễ.

<table border="1" bgcolor="#8E669E">
  <tbody>
    <tr>
      <th>Cột 1</th>
      <th>Cột 2</th>
      <th>Cột 3</th>
   </tr>
   <tr>
      <td rowspan="2">Dòng 1 cột 1</td>
      <td>Dòng 1 cột 2</td>
      <td>Dòng 1 cột 3</td>
   </tr>
   <tr>
      <td>Dòng 2 cột 2</td>
      <td>Dòng 2 cột 3</td>
   </tr>
   <tr>
      <td colspan="3">Dòng 3 cột 1</td>
   </tr>
  </tbody>
</table>

Dưới đây mình có một số thuộc tính trong bảng dành cho bạn , hãy để ý mấy cái thuộc tính này bạn sẽ hiểu ngay thôi.

border Kẻ dòng , cột , bao quanh bảng giúp ngăn cách dữ liệu được rõ ràng, nếu bạn không muốn sử dụng border thì xóa nó đi hoặc thay giá trị 1 thành 0.

Colspan Thuộc tính kết hợp 2 hoặc nhiều cột thành 1 cột duy nhất.

Rowspan Thuộc tính kết hợp 2 hay nhiều hàng thành 1 hàng duy nhất.

Backgrounds thiết lập màu nền cho toàn bộ bảng hoặc 1 vị trí bảng nhất định bao gồm ( bgcolor, background).

Height, width thiết lập chiều cao, chiều rộng cho bảng.

<caption>Nội dung</caption> Tạo chú thích cho bảng. Thông thường hay đặt ở đầu bảng ngay dưới thẻ mở <table>.

Trên đây mình đã giới thiệu cho các bạn cách tạo bảng trong 1 tài liệu web, nếu bạn chưa hình dung ra thì chỉ cần copy thuộc tính rồi dán vào bên trong thẻ mở kết hợp với những thông số giá trị các bạn muốn để xem nó hiện lên như thế nào.

Và đây cũng là bài cuối cùng trong chuỗi serie học html cơ bản mà mình muốn hướng đến các bạn bắt đầu làm quen với thiết kế web, do mình mới viết có thể chưa truyền đạt đầy đủ cho các bạn hoặc tài liệu vẫn chưa đầy đủ , có gì mong các bạn góp ý để mình hoàn thiện thêm những serie tiếp theo.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái công sở và thích bàn luận quân sự.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz

Create Account



Log In Your Account