Table trong layout web

Table trong html là một trong những thành phần cơ bản nhất, được dùng để hiển thị bảng tốt nhất.

Table – cơ bản

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle td {
    padding: 5px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
        <tr>
        <td>td31</td>
        <td>td32</td>
        <td>td33</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
</table>
</body>
</html>

Hiển thị trình duyệt:

 

Download file để thực hành

Table – cơ bản với <th> nằm ngang

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    padding: 5px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <th>th01</th>
        <th>th02</th>
        <th>th03</th>
        <th>th04</th>
        <th>th05</th>
    </tr>
    <tr>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
</table>
</body>
</html>

Hiển thị trình duyệt:

 

Table – cơ bản với <th> nằm dọc

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
.tableStyle {
    width: 100%;
}
.tableStyle th,
.tableStyle td {
    padding: 5px;
}
</style>
</head>
<body>
<table class="tableStyle" border="1">
    <tr>
        <th>th01</th>
        <td>td01</td>
        <td>td02</td>
        <td>td03</td>
        <td>td04</td>
        <td>td05</td>
    </tr>
    <tr>
        <th>th02</th>
        <td>td11</td>
        <td>td12</td>
        <td>td13</td>
        <td>td14</td>
        <td>td15</td>
    </tr>
    <tr>
        <th>th03</th>
        <td>td21</td>
        <td>td22</td>
        <td>td23</td>
        <td>td24</td>
        <td>td25</td>
    </tr>
    <tr>
        <th>th04</th>
        <td>td31</td>
        <td>td32</td>
        <td>td3</td>
        <td>td34</td>
        <td>td35</td>
    </tr>
</table>
</body>
</html>

Hiển thị trình duyệt:

 

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *