11. HTML - Bảng

Thảo luận trong 'HTML' bắt đầu bởi admin, 15/9/15.

Tags:
  1. admin

    admin Administrator Thành viên BQT

    Tham gia ngày:
    5/9/15
    Bài viết:
    42
    Đã được thích:
    0
    Điểm thành tích:
    6
    Bảng HTML cho phép sắp xếp các dữ liệu như văn bản, hình ảnh, đường link… vào các ô trong bảng.

    Bảng được định nghĩa bằng thẻ <table>.

    Bảng được chia thành các hàng (table rows) bằng thẻ <tr>.

    Các hàng đó được chia thành các cột dữ liệu (table data) bằng thẻ <td>.

    Một hàng cũng có thể chia thành các cột tiêu đề (table headings) bằng thẻ <th>.

    Ví dụ

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Tables</title>
    </
    head>
    <
    body>
        <
    table border="1">
            <
    tr>
                <
    td>Row 1Column 1</td>
                <
    td>Row 1Column 2</td>
            </
    tr>
            <
    tr>
                <
    td>Row 2Column 1</td>
                <
    td>Row 2Column 2</td>
            </
    tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    Border ở đây là một thuộc tính của thẻ <table> và nó được sử dụng để đặt đường viền bao quanh các ô. Nếu bạn không cần đường viền, thiết lập border="0" là xong.

    Tiêu đề bảng <th> (Table Heading)

    Tiêu đề bảng có thể được định nghĩa bằng thẻ <th>. Thẻ <th> này được đặt để thay thế cho thẻ <td>, được sử dụng để đại diện cho ô dữ liệu thực tế. Thông thường bạn sẽ đặt nó vào dòng đầu tiên làm tiêu đề của bảng như dưới đây, hoặc bạn có thể sử dụng thẻ <th> ở bất kì dòng nào.

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
       <
    title>HTML Table Header</title>
    </
    head>
    <
    body>
       <
    table border="1">
         <
    tr>
           <
    th>Name</th>
           <
    th>Salary</th>
         </
    tr>
         <
    tr>
           <
    td>Ramesh Raman</td>
           <
    td>5000</td>
         </
    tr>
           <
    tr>
           <
    td>Shabbir Hussein</td>
           <
    td>7000</td>
         </
    tr>
       </
    table>
    </
    body>
    </
    html>
    Kết quả :
    upload_2015-9-23_16-12-46.jpeg

    Thuộc tính cellpadding và cellspacing

    Thuộc tính cellpadding và cellspacing được sử dụng để điều chỉnh khoảng trắng trong các ô của bảng. Thuộc tính cellspacing định nghĩa độ rộng của đường viền, cellpadding đại diện cho khoảng cách giữa các đường viền của các ô với nội dung của một ô.

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Table Cellpadding</title>
    </
    head>
    <
    body>
        <
    table border="1" cellpadding="5" cellspacing="5">
            <
    tr>
                <
    th>Name</th>
                <
    th>Salary</th>
            </
    tr>
            <
    tr>
                <
    td>Ramesh Raman</td>
                <
    td>5000</td>
            </
    tr>
            <
    tr>
                <
    td>Shabbir Hussein</td>
                <
    td>7000</td>
            </
    tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_9-13-13.jpeg

    Thuộc tính Colspan và Rowspan

    Bạn sẽ sử dụng thuộc tính colspan nếu bạn muốn ghép 2 hay nhiều cột thành một cột. Tương tự, bạn sử dụng rowspan nếu bạn muốn ghép (merge) 2 hay nhiều dòng.

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>HTML Table Colspan/Rowspan</title>
    </
    head>
    <
    body>
        <
    table border="1">
            <
    tr>
                <
    th>Column 1</th>
                <
    th>Column 2</th>
                <
    th>Column 3</th>
            </
    tr>
                <
    tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
                <
    tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
                <
    tr><td colspan="3">Row 3 Cell 1</td></tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_9-23-56.jpeg

    Background của bàng

    Bạn có thể thiết lập nền của bảng bằng một trong 2 cách sau :
    • Thuộc tính bgcolor: Bạn có thể thiết lập màu nền cho toàn bộ bảng hoặc chỉ một ô.
    • Thuộc tính background: Bạn có thể thiết lập hình nền cho toàn bộ bảng hoặc chỉ một ô.
    Bạn cũng có thể thiết lập màu của đường viền sử dụng thuộc tính bordercolor.

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Table Background</title>
    </
    head>
    <
    body>
        <
    table border="1" bordercolor="green" bgcolor="yellow">
            <
    tr>
                <
    th>Column 1</th>
                <
    th>Column 2</th>
                <
    th>Column 3</th>
            </
    tr>
            <
    tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
            <
    tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
            <
    tr><td colspan="3">Row 3 Cell 1</td></tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_10-34-42.jpeg

    Đây là một ví dụ sử dụng thuộc tính background. Ví dụ bên dưới sử dụng một ảnh có sẵn trong thư mục images.
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>HTML Table Background</title>
    </
    head>
    <
    body>
        <
    table border="1" bordercolor="green" background="images/test.jpg">
            <
    tr>
                <
    th>Column 1</th>
                <
    th>Column 2</th>
                
    h>Column 3</th>
            </
    tr>
            <
    tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
            <
    tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
            <
    tr><td colspan="3">Row 3 Cell 1</td></tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_10-53-13.jpeg

    Kích thước của bảng

    Bạn có thể thiết lập độ rộng và chiều cao của bảng bằng cách sử dụng thuộc tính width và height. Bạn có thể chỉ định chiều cao, chiều rông bằng pixels hoặc tỷ lệ % diện tích màn hình.

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>HTML Table Width/Height</title>
    </
    head>
    <
    body>
    <
    table border="1" width="400" height="150">
        <
    tr>
            <
    td>Row 1Column 1</td>
            <
    td>Row 1Column 2</td>
        </
    tr>
        <
    tr>
            <
    td>Row 2Column 1</td>
            <
    td>Row 2Column 2</td>
        </
    tr>
    </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_10-58-50.jpeg

    Tựa đề (Caption)

    Thẻ caption sẽ hoạt động như tiêu đề hoặc phần giải thích cho bảng, nó được hiển thị ở phần trên cùng của bảng. Thẻ này không hoạt động trong phiên bản mới của HTML/XHTML.

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>HTML Table Caption</title>
    </
    head>
    <
    body>
        <
    table border="1" width="100%">
            <
    caption>This is the caption</caption>
            <
    tr>
                <
    td>row 1column 1</td><td>row 1columnn 2</td>
            </
    tr>
            <
    tr>
                <
    td>row 2column 1</td><td>row 2columnn 2</td>
            </
    tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_15-11-33.jpeg

    Đầu, thân và chân bảng

    Bảng có thể được chia ra thành 3 phần : header, body, foot.

    Phần head và foot giống với phần header và footer trong tài liệu word, nó tồn tại giống nhau trên tất cả các trang, trong khi đó body là phần nội dung chính của bảng.

    3 phần ấy là:
    • <thead> dùng để tạo tiêu đề bảng (table header) tách biệt
    • <body> dùng để tạo phần thân của bảng
    • <tfoot> dùng để tạo một footer bảng tách biệt
    Một bảng có thể chứa vài phần tử <tbody> để chỉ cách trang khác nhau hoặc nhóm dữ liệu.

    Nhưng lưu ý rằng thẻ <thead> và <tfoot> sẽ xuất hiện trước <tbody>

    Ví dụ
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>HTML Table</title>
    </
    head>
    <
    body>
        <
    table border="1" width="100%">
            <
    thead>
                <
    tr>
                    <
    td colspan="4">This is the head of the table</td>
                </
    tr>
            </
    thead>
            <
    tfoot>
                <
    tr>
                    <
    td colspan="4">This is the foot of the table</td>
                </
    tr>
            </
    tfoot>
            <
    tbody>
                <
    tr>
                    <
    td>Cell 1</td>
                    <
    td>Cell 2</td>
                    <
    td>Cell 3</td>
                    <
    td>Cell 4</td>
                </
    tr>
            </
    tbody>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_15-19-5.jpeg

    Bảng lồng nhau (Nested Tables)

    Một bảng có thể được lồng vào trong một bảng khác. Không chỉ bảng mà bạn có thể sử dụng hầu như tất cả các thẻ bên trong thẻ <td> của bảng.

    Ví dụ:
    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
        <
    title>HTML Table</title>
    </
    head>
    <
    body>
        <
    table border="1" width="100%">
            <
    tr>
                <
    td>
                   <
    table border="1" width="100%">
                       <
    tr>
                           <
    th>Name</th>
                           <
    th>Salary</th>
                       </
    tr>
                       <
    tr>
                           <
    td>Ramesh Raman</td>
                           <
    td>5000</td>
                       </
    tr>
                       <
    tr>
                           <
    td>Shabbir Hussein</td>
                           <
    td>7000</td>
                       </
    tr>
                   </
    table>
                </
    td>
            </
    tr>
        </
    table>
    </
    body>
    </
    html>
    Kết quả:
    upload_2015-9-24_15-24-12.jpeg
     
    Chỉnh sửa cuối: 24/9/15

Chia sẻ trang này