Tạo bảng trong html

Khi nào các bạn sẽ tạo bản trong html ? thật vậy, việc tạo bảng trong html thường được dùng để thiết lập một danh sách nào đó hoặc như nút xem tập phim trong những website nói về phim ảnh hay là một bảng phân trang trong website.

Cách tạo bảng trong html

Để tạo một bảng trước tiên bạn phải sử dụng một cặp thẻ <table></table> nhằm khai báo cho trình duyệt biết rằng tôi đang tạo một bảng để cho trình duyệt tiếp nhận và hiển thị ra bên ngoài.

 

<table>

<tr></tr>

<tr></tr>

<tr></tr>

</table>

Thẻ tr trong html

Bây giờ các bạn đã biết việc khai báo tạo bảng bằng cặp thẻ  <table></table> rồi giờ các bạn cần phải khai báo thẻ tr trong html nữa. Thẻ tr trong html có ý nghĩa là khai báo số hàng cho bảng,ở ví dụ trên mình có 3 thẻ tr thì mình sẽ có 3 hàng từ trên xuống dưới ( các bạn hiểu chứ).

Một cặp thẻ <tr></tr> tương ứng với một hàng trong bảng, vì vậy các bạn có bao nhiêu cặp thẻ tr sẽ có bấy nhiêu hàng trong một bảng.

Thẻ td trong html

Bạn đã hiểu rõ về cách dùng của cặp thẻ tr rồi bây giờ các bạn cần hiểu thêm cặp thẻ td nữa, cặp thẻ <td></td> trong html là khai báo số cột cho trình duyệt hiểu và hiển thị.

Một cặp thẻ <td></td> tương ứng với một cột trong bảng, vì vậy các bạn có bao nhiêu cặp thẻ tr sẽ có bấy nhiêu cột trong một bảng.

Tạo khung trong html

Tiếp theo các bạn cần phải tạo khung trong html cho bạn, nếu như các bạn không tao khung cho bản thì đâu con là bảng nữa đúng không nào, việc tạo khung sẽ giúp người dùng xem rõ hơn nội dung của một bảng.

Để bắt đầu tạo khung trong html bạn cần phải sử dụng thuộc tính border, đơn vị đo cho thuộc tính border thường là px mình sẽ làm ví dụ nho nhỏ để các bạn hiểu hơn.


<table border="1px">

<tr>

<td>cách tạo bảng trong html</td>

</tr>

<tr>

<td>thẻ td trong html</td>

<td>thẻ td trong html</td>

</tr>

<tr>

<td>thẻ td trong html</td>

<td>thẻ td trong html</td>

<td>thẻ td trong html</td>

</tr>

</table>

Mình sẽ cho các bạn thấy ảnh thực thế từ đoạn code html trên.

cách tạo bảng trong html
cách tạo bảng trong html

Các thuộc tính table trong css

Bây giờ mình đi ngoài lề một chút vì các thuộc tính table có liên quan đến css, nên mình sẽ nêu ra một số thuộc tính cũng như giá trị của các thuộc tính trong cặp thẻ table cho các bạn hiểu hơn.

các thuộc tính table trong css
các thuộc tính table trong css

Các bạn nên đọc trước nội dung trong bức ảnh rồi mình sẽ cho các bạn xem cách sử dụng các thuộc tính bằng code.


<table border="1px" cellpadding="30px" cellspacing="20px">
    
<tr>
        
<td>cách tạo bảng trong html</td>

</tr>

<tr>
        
<td>thẻ td trong html</td>

<td>thẻ td trong html</td>

</tr>

<tr>
      
<td>thẻ td trong html</td>

<td>thẻ td trong html</td>

<td>thẻ td trong html</td>

</tr>

</table>

Ảnh thực thế của đoạn code trên

thuộc tính cellpadding và thuộc tính cellspacin
thuộc tính cellpadding và thuộc tính cellspacing

Cách gộp cột và hàng trong bảng

có 2 thuộc tính quan trọng nữa đó là thuộc tính colspan=”số lượng cột muốn gộp” và rowspan=”số lượng hàng muốn gộp”, các bạn cũng phải để ý đến, mình sẽ show code ở dưới.


<table border="1px" width="100%" cellspacing="0px">

<tbody>

<tr>

<th colspan="3">Ngày tháng năm sinh</th>

</tr>


<tr>

<td>24</td>


<td>02</td>


<td>1991</td>

</tr>

</tbody>

</table>

Đây là ảnh minh họa cho ví dụ trên.

thuộc tính colspan và thuộc tính rowspan
thuộc tính colspan và thuộc tính rowspan

Lời kết : có vẻ như bài này liên quan đến code html và css nhiều quá rồi thì phải, các bạn học bài tạo bảng trong html nên lưu ý code nhé.

-

Trả lời