Các thẻ HTML định dạng Table

Bài hôm nay mình sẽ giới thiệu đến các bạn các thẻ HTML định dạng Table thông dụng hiện nay. Bài học nằm trong Serie học HTML căn bản. Trong mỗi Table chúng ta thường thấy có 2 thành phần chính đó là hàng và cột. Trong mỗi hàng và cột sẽ có những thuộc tính và các định dạng khác nhau. Bài hôm nay chúng ta sẽ cùng khám phá nhé.

1. Các thẻ HTML định dạng Table căn bản

Một table được tạo thành từ các thẻ table, tr, td, th

<pre class="lang:xhtml decode:true crayon-selected"><body>
<table border="2" cellspacing="5" cellpadding="10">
 <caption> Table </caption>
    <tr>
        <th>Tiêu đề 1</th>
        <th>Tiêu đề 2</th>
        <th>Tiêu đề 3</th>
	</tr>
	<tr>
        <td>Hàng 1 cột 1</td>
        <td>Hàng 1 cột 2</td>
        <td>Hàng 1 cột 3</td>
    </tr>
    <tr>
        <td>Hàng 2 cột 1</td>
        <td>Hàng 2 cột 2</td>
        <td>Hàng 2 cột 3</td>
    </tr>
</table>
</body></pre>

Trong đó:

  •  Thuộc tính border là đường viền của Table
  •  Cellspacing là khoảng cách giữa các ô với nhau
  •  Cellpadding là khoảng cách từ chữ trong ô đến đường viền của ô
  •  Caption là tiêu đề của Table
  •  tr là 1 dòng trong Table
  •  td là 1 ô dữ liệu trong Table
  •  th là 1 ô tiêu đề trong Table
Kết quả :các thẻ html định dạng table

2. Thuộc tính colspan và rowspan trong Table

Thông thường không phải lúc nào 1 Table cũng đơn giản như trên, tùy theo nhu cầu của từng người mà định dạng Table sẽ khác nhau. Để xử lý vấn đề đó chúng ta có 2 thuộc tính là colspan và rowspan.

Thuộc tính colspan

Dùng để nối hai hoặc nhiều cột với nhau trên 1 dòng tính từ ô trên cùng và đầu tiên bên tay trái đi tới phía trước.các thẻ html định dạng table 032

Cách xử lý:

<pre class="lang:xhtml decode:true"><body>
<table border="2" cellspacing="5" cellpadding="10">
 <caption> Table </caption>
    <tr>
        <th colspan="2">Tiêu đề 1</th>
        <th>Tiêu đề 2</th>
	</tr>
	<tr>
        <td>Hàng 1 cột 1</td>
        <td>Hàng 1 cột 2</td>
        <td>Hàng 1 cột 3</td>
    </tr>
    <tr>
        <td>Hàng 2 cột 1</td>
        <td>Hàng 2 cột 2</td>
        <td>Hàng 2 cột 3</td>
    </tr>
</table>
</body></pre>

 

Thuộc tính rowspan

Dùng để nối hai hoặc nhiều cột với nhau trên 1 dòng tính từ ô trên cùng và đầu tiên bên tay trái đi xuống phía dưới. các thẻ html định dạng table 00654

Cách xử lý:

<pre class="lang:xhtml decode:true"><body>
<table border="2" cellspacing="5" cellpadding="10">
 <caption> Table </caption>
    <tr>
        <th rowspan="2">Tiêu đề 1</th>
        <th>Tiêu đề 2</th>
        <th>Tiêu đề 3</th>
	</tr>
	<tr>
        <td>Hàng 1 cột 1</td>
        <td>Hàng 1 cột 2</td>
    </tr>
    <tr>
        <td>Hàng 2 cột 1</td>
        <td>Hàng 2 cột 2</td>
        <td>Hàng 2 cột 3</td>
    </tr>
</table>
</body></pre>
&nbsp;

 

Lưu ý : Ở 2 thuộc tính này khi sử dụng colspan tức là ô đó sẽ chiếm vị trí của ô bên cạnh còn rowspan tức là ô đó sẽ chiếm vị trí của ô bên dưới. Vì vậy bạn phải xóa bớt đi một ô trong dòng đó như ví dụ bên trên.

3. Nhóm thẻ thead – tbody – tfood

Giống như là bố cục của một trang web thông thường bao gồm header, bodyfooter thì Table cũng có bố cục tương tự với nhóm thẻ theadtbodytfood. các thẻ html định dạng table 0532

<pre class="lang:xhtml decode:true "><body>
<table border="2" cellspacing="5" cellpadding="10">
    <thead>
        <tr>
            <td>
                Họ Tên
            </td>
            <td>
                Email
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                Nguyenloi1368
            </td>
            <td>
                Nguyenloi1368@gmail.com
            </td>
        </tr>
        <tr>
            <td>
                Nguyenloi
            </td>
            <td>
                Blogloi.com
            </td>
        </tr>
    </tbody>
    <tfood>
        <tr>
            <td>
                Họ Tên
            </td>
            <td>
                Email
            </td>
        </tr>
    </tfood>
</table>
</body>
</pre>

 

Lời kết : Kết thúc bài hôm nay bạn đã có thể nắm được các thẻ HTML định dạng Table căn bản thường dùng, bây giờ thì bạn đã có thể tạo ra 1 trang web đơn giản dựa trên bố cục của Table và các kiến thức đã học từ những bài trước một cách nhanh chóng rồi nhé.

Chúc bạn thành công!

 

Những bài bạn nên xem:
  1. HTML là gì? Bố cục HTML của một trang web
  2. Các thẻ HTML khai báo thông tin web căn bản
  3. Các thẻ HTML định dạng văn bản
  4. Các thẻ HTML định dạng danh sách (list)
  5. Cách dùng thẻ a để tạo liên kết trong HTML
  6. Các thẻ HTML định dạng hình ảnh và video

 

 

Các thẻ HTML định dạng Table
Đánh giá bài viết

Bình luận

Bình luận

Share this post