Thẻ caption và thuộc tính trong html - seoit.vn

Thẻ <caption></caption> có chức năng chứa một đoạn chí thích làm  tiêu đề cho <table></table>

<caption></caption> được đặt bên trong thẻ table và đặt trước các thẻ khác ngay sau  thẻ <table></table> mở 

<table></table> dùng để biểu thị một danh sách chứa các thông tin danh sách theo mục đích thức tự hoặc không có thứ tự bên trong t<table></table>có người ta sử dụng <caption></caption> để làm chú thích tiêu đề cho bảng của <table></table>, ví dụ sau đây tôi sẽ code ra một bảng <table></table> có <caption></caption> và không có <caption></caption> cho các bạn nhìn và phân biệt sự khác biệt không khi không có <caption></caption> và khi có <caption></caption> thì bảng sẽ như thế nào

Giao diện:

Danh sách học sinh "caption đây"

STT	Họ Tên	Năm Sinh	Số Đt	Lớp
1	Nguyên Văn L	1992	123456	12A
2	Phan Ng Ngọc	1992	123145	12A
3	Trần Đưc Thiện	1992	123456	12A
4	Bùi Quang Dũng	1992	12345	12A
5	Lê Quang Trung	1992	12345	12A
Bảng này sử dụng caption

STT	Họ Tên	Năm Sinh	Số Đt	Lớp
1	Nguyên Văn L	1992	123456	12A
2	Phan Ng Ngọc	1992	123145	12A
3	Trần Đưc Thiện	1992	123456	12A
4	Bùi Quang Dũng	1992	12345	12A
5	Lê Quang Trung	1992	12345	12A
Bảng này không sử dụng caption

code:

<table border="1" cellpadding="3">

<caption> Danh sách học sinh </caption>

<thead>

<tr>

<th>STT </th>

<th> Họ Tên </th>

<th> Năm Sinh </th>

<th> Số Đt </th>

<th> Lớp  </th>

</tr>

</thead>

<tbody>

<tr>

<td> 1 </td>

<td>Nguyên Văn L</td>

<td> 1992</td>

<td> 123456</td>

<td> 12A </td>

</tr>

<tr>

<td>2</td>

<td> Phan Ng Ngọc</td>

<td> 1992 </td>

<td> 123145 </td>

<td> 12A </td>

</tr><tr>

<td>3</td>

<td> Trần Đưc Thiện</td>

<td> 1992 </td>

<td>123456</td>

<td>12A</td>

</tr>

<tr>

<td>4</td>

<td>Bùi Quang Dũng </td>

<td>1992 </td>

<td>12345</td>

<td>12A</td>

</tr>

<tr>

<td>5</td>

<td>Lê Quang Trung </td>

<td> 1992 </td>

<td> 12345 </td>

<td>12A </td>

</tr>

<tr>

<td colspan="5" align="center"> 

Bảng này sử dụng caption 

</td>

</tr>

</tbody>

</table>

<table border="1" cellpadding="3">

<thead>

<tr>

<th>STT </th>

<th> Họ Tên </th>

<th> Năm Sinh </th>

<th> Số Đt </th>

<th> Lớp  </th>

</tr>

</thead>

<tbody>

<tr>

<td> 1 </td>

<td>Nguyên Văn L</td>

<td> 1992</td>

<td> 123456</td>

<td> 12A </td>

</tr>

<tr>

<td>2</td>

<td> Phan Ng Ngọc</td>

<td> 1992 </td>

<td> 123145 </td>

<td> 12A </td>

</tr>

<tr>

<td>3</td>

<td> Trần Đưc Thiện</td>

<td> 1992 </td>

<td>123456</td>

<td>12A</td>

</tr>

<tr>

<td>4</td>

<td>Bùi Quang Dũng </td>

<td>1992 </td>

<td>12345</td>

<td>12A</td>

</tr>

<tr>

<td>5</td>

<td>Lê Quang Trung </td>

<td> 1992 </td>

<td> 12345 </td>

<td>12A </td>

</tr>

<tr>

<td colspan="5" align="center"> Bảng này không sử dụng caption</td>

</tr>

</tbody>

</table>

Thuộc tính 

Thuộc tính: class

xác định tên gọi một phần tử 

Ví dụ: class="section"

class có thể đặt cho nhiều phần tử và nhóm chúng lại để áp dụng css lên một loạt các phần tử cần áp dụng thuộc tính css 

Thuộc tính id 

xác định tên gọi của phần tử một cách riêng biệt 

Ví dụ: id="layout"

id khi được sử dụng chỉ được sử dụng riêng biệt và duy nhất, không được trùng lặp 

 

Thuộc tính - lang

Xác định Mã ngôn ngữ

Ví dụ: lang="vi"

Xác định mã ngôn ngữ cho nội dung trong một thành phần.

Thuộc tính - dir

dir="rtl" 

dir=”ltr”

Xác định hướng văn bản cho các nội dung trong một thành phần.

Thuộc tính - style

Xác định kiểu định dạng

Ví dụ: style="background : green; color:black ;  "

Thuộc tính này có chức năng xác định kiểu định dạng cho thành phần 

 

title

Ví dụ: Text title=”nội dung ”

Thuộc tính này Xác định thêm thông tin là tiêu đề cho thành phần.