Thiết Kế Web

Khái niềm về table trong HTML

Bài trước chúng ta đã Tìm hiểu về các thẻ định dạnh danh sách Tiếp theo bài viết hôm nay 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 …

Bài trước chúng ta đã Tìm hiểu về các thẻ định dạnh danh sách Tiếp theo bài viết hôm nay 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ụ:

Stt Tên khóa học Giảng viên Năm học
1 Khóa học html Hiếu Đặng 2013
2 Khóa học PHP căn bản Hiếu Đặng 2013
3 Khóa học PHP nâng cao Hiếu Đặng 2013
4 Khóa học PHP Framework Hiếu Đặng 2013

Cấu trúc :

<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à động 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ụ :

<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

the-table

Để thêm 1 dòng tiếp theo ta chỉ cần thêm 1 cặp thẻ <tr></tr> nữa là xong

<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>

the-table-trong-html

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.

Thẻ:, ,
comments powered by Disqus
Powered by HTH Company