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, HTML5' bắt đầu bởi admin, 5/12/15.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,897
    Đã được thích:
    1,198
    Đ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="https://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
    admin, 5/12/15
    #1


Chủ để tương tự : Bài Cấu
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Bài 2: Xử lý hình ảnh(IMG), đường dẫn(URL) trong HTML5 1/12/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Bài 1 : lập trình code html: các ký tự đặc biệt 28/11/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Hướng dẫn cách cấu hình bản ghi MX cho Gmail trong cài đặt domain 11/8/20
Ngôn ngữ lập trình CSS, HTML, HTML5 Lỗi: Uncaught TypeError: $ is not a function trong javascript jQuery HTML 12/4/20