Html css - tìm hiểu về 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ụ table :

Stt	Tên khóa học	Giảng viên	Năm học
1	Khóa học html css	haanhdon	2013
2	Khóa học PHP căn bản	haanhdon	2013
3	Khóa học PHP nâng cao	haanhdon	2013
4	Khóa học PHP Framework	haanhdon	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


- Để 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>haanhdon</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>



* Gộp, hợp 2 cột trong table ta dùng cú pháp colspan="số cột muốn hợp" , ví dụ

    <tr>
           <td>Sttt</td>
           <td>Tên khóa học</td>
           <td colspan="2">Giảng viên - Khóa học</td>
    </tr>

Ta đang gộp 2 cột "giảng viên" và "khóa học" thành 1 cột



Tương tự có gộp dòng là rowspan = "số dòng" nhé các bạn