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:
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>