Tìm hiểu thẻ table trong HTML
Bài viết này chúng ta sẽ tìm hiểu qua thẻ Table trong HTML. Thẻ table trong html cũng giống như excel trong microsoft office vậy nó được dùng để trình bày các bảng biểu, các bài viết, nội dung… có nhiều dòng và nhiều cột trong một website.
Thẻ table được ký hiệu bằng cặp thẻ <table></table>
Ví dụ:
Cấu trúc :
– Thẻ table bắt đầu bằng cặp thẻ <table></table>
– Width : là độ rộng của table
– Border : là độ rộng đường viền của table
– Thẻ <tr></tr> là một dòng của table
– Thẻ <td></td> là một cột của 1 dòng, td nằm trong tr
Ví dụ :
Ở ví dụ trên ta thấy bảng trên có một dòng và trong dòng có 4 cột
Để thêm 1 dòng tiếp theo ta chỉ cần thêm 1 cặp thẻ <tr></tr> nữa là xong
Đây là giao diện khi chúng ta thêm 1 cặp thẻ dòng <tr></tr>
Tương tự có gộp dòng là rowspan = “số dòng” nhé các bạn. Hy vọng bài viết này sẽ giúp ích cho các bạn mới bắt đầu tìm hiểu về HTML.
Chúc các bạn thành công.
Bài viết này chúng ta sẽ tìm hiểu qua thẻ Table trong HTML. Thẻ table trong html cũng giống như excel trong microsoft office vậy nó được dùng để trình bày các bảng biểu, các bài viết, nội dung… có nhiều dòng và nhiều cột trong một website.
Thẻ table được ký hiệu bằng cặp thẻ <table></table>
Ví dụ:
Mã:
<table width=”300″ border=”1″>
<tr>
<td>Cột 1</td>
<td>Cột 2</td>
<td>Cột 3</td>
<td>Cột 4</td>
</tr>
</table>
– Thẻ table bắt đầu bằng cặp thẻ <table></table>
– Width : là độ rộng của table
– Border : là độ rộng đường viền của table
– Thẻ <tr></tr> là một dòng của table
– Thẻ <td></td> là một cột của 1 dòng, td nằm trong tr
Ví dụ :
Mã:
<table width=”300″ border=”1″>
<tr>
<td>Stt</td>
<td>Tên khóa học</td>
<td>Giảng viên</td>
<td>Năm học</td>
</tr>
</table>
Ở ví dụ trên ta thấy bảng trên có một dòng và trong dòng có 4 cột
Mã:
<table width=”300″ border=”1″>
<tr>
<td>Stt</td>
<td>Tên khóa học</td>
<td>Giảng viên</td>
<td>Năm học</td>
</tr>
<tr>
<td>1</td>
<td>Khóa học PHP</td>
<td>Hiếu Đặng</td>
<td>2013</td>
</tr>
</table>
Đây là giao diện khi chúng ta thêm 1 cặp thẻ dòng <tr></tr>
Chúc các bạn thành công.
Nguồn: tuhocphp.com
Bài viết liên quan
Bài viết mới