Bài 3: Cấu trúc bảng table trong Code HTML5

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML' bắt đầu bởi admin, 5/12/15.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    3,746
    Đã được thích:
    716
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bài 3: Cấu trúc bảng table trong Code HTML5

    Demo bằng hình ảnh về bài cấu trúc bản và bài viết + code tạo bảng, liên kết bảng, gộp bảng.

    Về cách tạo bảng mình đã viết rõ note trong code ở dưới và file tải bài học ở dưới hoặc code trực tiếp ở dưới, bạn copy cho vào notepad lưu dưới dạng .html để xem kết quả nhé.

    1. Bảng căn bản.

    Demo hình ảnh
    cau-truc-bang-table-trong-code-html-bai-1.png

    Cách tạo bẳng căn bản
    Demo online
    Code căn bản của bài trên :
    Mã:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bài 3: Cấu trúc bẳng table trong HTML5 bài tập 1</title>
    <meta content="Bài 3: Cấu trúc bẳng table trong HTML5, Bài 3: Cấu trúc bẳng table trong Code HTML5, Bài 3: Cấu trúc bẳng table trong HTML5, HTML" name="description">
    </head>
    <body>
    
    <h1 align="center">Bài 3: Cấu trúc bẳng table trong Code HTML5 bài tập 1</h1>
    
    <h2>1. Bảng Căn Bảng</h2>
        <!-- thẻ 'table' là thẻ tạo 1 bảng trong html -->
        <table width="80%" border="1" align="center">
            <caption>Tiêu Đề Của Bảng 1</caption>
            <tr> <!-- thẻ 'tr' là 1 dòng, 1 hàng trong bảng-->
                <!-- thẻ 'th' tiêu đề đầu của 1 bảng, chữ trong bảng sẽ được in đậm và canh giữa -->
                <th width="30%" height="30">Cell 1</th>
                <th width="30%">Cell 2</th>
                <th width="40%">Cell 3</th>
            </tr>
             <tr>
                 <!-- thẻ 'td' là 1 khung, 1 ô, 1 cell trong bảng-->
                <!-- thuộc tính 'align' canh text trái(left), phải(right, giữa. Thuộc tính 'valign' canh text trên(top), giữa(mid), dưới(bot)-->
                <td height="30" align="center" valign="middle">Cell 4</td>
                <td align="center" valign="middle">Cell 5</td>
                <td align="center" valign="middle">Cell 6</td>
            </tr>
             <tr>
                <td height="30">Cell 7</td>
                <td>Cell 8</td>
                <td>Cell 9</td>
            </tr>
        </table>
      
    <h2>2. Bảng Mer, liên kết các cell lại căn bản</h2>  
        <!-- thẻ 'table' là thẻ tạo 1 bảng trong html -->
        <table width="80%" border="1" align="center">
            <caption>Tiêu Đề Của Bảng 2</caption>
            <tr> <!-- thẻ 'tr' là 1 dòng, 1 hàng trong bảng-->
                <!-- thẻ 'th' tiêu đề đầu của 1 bảng, chữ trong bảng sẽ được in đậm và canh giữa -->
                <th colspan="2" width="60%" height="30">Cell 1</th>
                <th width="40%">Cell 3</th>
            </tr>
             <tr>
                 <!-- thẻ 'td' là 1 khung, 1 ô, 1 cell trong bảng-->
                <!-- thuộc tính 'align' canh text trái(left), phải(right, giữa. Thuộc tính 'valign' canh text trên(top), giữa(mid), dưới(bot)-->
                <td height="30" align="center" valign="middle">Cell 4</td>
                <td align="center" valign="middle">Cell 5</td>
                <td align="center" valign="middle" rowspan="2">Cell 6</td>
            </tr>
             <tr>
                <td height="30">Cell 7</td>
                <td>Cell 8</td>
            </tr>
        </table>
      
    </body>
    </html>
    

    cau-truc-bang-table-trong-code-html.png

    Cách tạo bảng nang cao, tạo khung web bằng bảng table.

    Demo online
    Code về mảng nâng cao:
    Mã:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Bài 3: Cấu trúc bẳng table trong HTML5 bài tập 2</title>
    <meta content="Bài 3: Cấu trúc bẳng table trong HTML5, Bài 3: Cấu trúc bẳng table trong Code HTML5, Bài 3: Cấu trúc bẳng table trong HTML5, HTML" name="description">
    </head>
    
    <body>
    
    <h1 align="center">Bài 3: Cấu trúc bẳng table trong Code HTML5 bài tập 2</h1>
    <!-- thẻ 'table' là thẻ tạo 1 bảng trong html -->
        <table width="98%" border="1" align="center">
            <caption>Trình bày giao diện web bằng table</caption>
            <tr>
                 <!-- thẻ 'tr' là 1 dòng, 1 hàng trong bảng-->
                <!-- thẻ 'th' tiêu đề đầu của 1 bảng, chữ trong bảng sẽ được in đậm và canh giữa -->
                <th bgcolor="#000000" colspan="3">
                    <img width="100%" src="images/header.png" alt="header trang web">
                </th>
            </tr>
            <tr>
                 <!-- thẻ 'td' là 1 khung, 1 ô, 1 cell trong bảng-->
                <!-- thuộc tính 'align' canh text trái(left), phải(right, giữa. Thuộc tính 'valign' canh text trên(top), giữa(mid), dưới(bot)-->
                <td bgcolor="#FFFF80" colspan="3" height="40" align="center" valign="middle">
                <table width="100%" border="1" align="center" height="40">
                    <tr>
                        <th width="200"><a href="trangchu.html">Trang chủ</a></th>
                        <th width="200"><a href="gioithieu.html">Giới thiệu</a></th>
                        <th width="200"><a href="tintuc.html">Tin tức</a></th>
                        <th width="200"><a href="sanpham.html">Sản phẩm</a></th>
                        <th width="200"><a href="http://itseovn.com">Diễn đàn</a></th>
                        <th width="200"><a href="lienhe.html">Liên hệ</a></th>
                    </tr>         
                </table>
              
                </td>
            </tr>
            <tr>
                <td bgcolor="#666666"  width="20%"  height="300" align="center" valign="middle">Cell 3</td>
                <td  width="60%" height="300"  valign="top">Cell 4 - Trang Chủ
              
                    <ul>
                        <li>Web tĩnh
                            <ul>
                                <li>HTML</li>
                                <li>CSS</li>
                                <li>Javascript</li>
                            </ul>
                        </li>
                        <li>Web động
                            <ol type="i" start="3">
                                <li>PHP</li>
                                <li>DataBase</li>
                            </ol>
                        </li>
                    </ul>       
                </td>
                <td bgcolor="#666666"   width="20%" height="300" align="center" valign="middle">Cell 5</td>
            </tr>
             <tr>
                <td bgcolor="#9197a3" colspan="3" height="80" align="center" valign="middle">Cell 6</td>
            </tr>
        </table>
    </body>
    </html>
    
    Download code bài tập 3.
     
    Cảm ơn đã xem bài:

    Bài 3: Cấu trúc bảng table trong Code HTML5

    Chỉnh sửa cuối: 5/2/16
    Đang tải...


Like và Share ủng hộ ITSEOVN