HTML Table

Table là gì?

Table hay còn gọi là bảng thường sử dụng để hiển thị một danh sách. Mỗi table sẽ được chia ra gồm hai thành phần là hàng và cột.

Trong HTML, table sử dụng các cặp thẻ sau:

• caption: tên của bảng.
• thead : tiêu đề các cột.
• tbody: nội dung chính của bảng.
• tfoot: phần nội dung chân của bảng thường hay hiển thị tổng các giá trị của cột.
• tr: đánh dấu một dòng trong bảng
• td: đánh dấu một ô trong bảng.

Xây dựng bảng

Thử xây dựng 1 bảng đầy đủ các cặp thẻ

<table border="1">
    <caption>Ví dụ bảng sinh viên</caption>
    <thead>
        <tr>
            <th>STT</th>
            <th>Họ và tên</th>
            <th>Lớp</th>
            <th>Điểm</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Nguyễn An</td>
            <td>K10DC01</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Trần Dũng</td>
            <td>K10DC02</td>
            <td>9</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Số SV:2</td>
            <td></td>
            <td></td>
            <td> </td>
        </tr>
    </tfoot>
</table>

Tuy nhiên trong thực tế khi code ta thường bỏ qua các cặp thẻ <thead>, <thead>, <tfoot> code khi đó sẽ như sau

<table border=1 cellpadding="0" cellspacing="0">
    <caption>Ví dụ bảng sinh viên</caption>
           <tr>
            <th>STT</th>
            <th>Họ và tên</th>
            <th>Lớp</th>
            <th>Điểm</th>
        </tr>
 
        <tr>
            <td>1</td>
            <td>Nguyễn An</td>
            <td>K10DC01</td>
            <td>8</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Trần Dũng</td>
            <td>K10DC02</td>
            <td>9</td>
        </tr>
   
  		<tr>
            <td>Số SV:2</td>
            <td></td>
            <td></td>
            <td> </td>
        </tr>
</table>

Thuộc tính rowspan

Thuộc tính rowspan dùng để gộp 2 hoặc nhiều dòng vào làm một.Cú Pháp: rowspan=”n” với n là số dòng muốn gộp.

Ví dụ sau sẽ gộp 2 cột đầu của dòng 2 và dòng 3 trong bảng

<table border="1">
	
		<tr>
			<th >Dòng 1.1</th>
			<th>Dòng 1.2</th>
		</tr>
	
	
		<tr>
			<td rowspan="2">Dòng 2, dòng 3</td>
			<td>Dòng 2.2</td>
		</tr>
		<tr>
			<td>Dòng 3.2</td>
		</tr>
	
</table>

Thuộc tính colspan

Colspan thì sử dụng để gộp các ô cạnh nhau. Cú pháp colspan=”n” với là số lượng cột muốn gộp.

Ví dụ sau sẽ gộp 2 ô của dòng 2

<table border="1">
	
		<tr>
			<th >Dòng 1.1</th>
			<th>Dòng 1.2</th>
		</tr>
	
		<tr>
			<td colspan="2">Dòng 2</td>			
		</tr>
	
</table>

Comments

comments