Code Responsive Tables, template HTML Responsive đơn giản
1. Tạo bảng Responsive :
<style>
#table {
overflow-x: auto;
}
h2 {
text-align: center;
}
/* Định dạng cho bảng dữ liệu*/
table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
width: 60%;
border: 1px solid #ddd;
}
/* Định dạng cho các cột*/
th, td {
border: none;
text-align: left;
padding: 8px;
}
/* Tạo thanh sroll ngang nếu chiều dài nội dung quá lớn*/
#table {
overflow-x: auto;
}
/* Thiết lập màu nền cho các ô*/
tr:nth-child(even){
background-color: #f2f2f2
}
</style>
<center>
<h2>Gia công xẻ sấy gỗ thông NewzeaLand , Chile, Brazil , Thông Mỹ... xẻ sấy gỗ thông ta theo kích thước yêu cầu</h2>
<p>Mô tả</p>
</ center>
<div id='table'>
<table>
<!-- tieu de-->
<tr>
<th><center><font color='green' size='3'>Thanh bào 2 mặt, 4 mặt (gỗ nguyên và thanh gỗ ghép)</font></center></th>
<th><center><font color='green' size='3'>Ván gỗ thông ghép thanh.</font></center></th>
<th><center><font color='green' size='3'>Mặt bàn gỗ Thông ta</font></center></th>
</tr>
<!-- ket thuc -->
<!-- cot 1 -->
<tr>
<td><center><a href='#'>Thanh gỗ thông Newzealand.</a></center></td>
<td><center><a href='#'>Ván gỗ thông Newzealand</a></center></td>
<td><center><a href='#'>Mặt bàn tròn 15 x D600mm</a></center></td>
</tr>
<!--ket thuc cot 1-->
<!--cot 2-->
<tr>
<td><center><a href='#'>Thanh gỗ thông Chile.</a></center></td>
<td><center><a href='#'>Ván gỗ thông Chile</a></center></td>
<td><center><a href='#'>Mặt bàn vuông 15 x 600 x 600mm</a></center></td>
</tr>
<!--ket thuc cot 2-->
<tr>
<td><center><a href='#'>Thanh gỗ thông Brazil.</a></center></td>
<td><center><a href='#'>Ván gỗ thông Brazil</a></center></td>
<td><center><a href='#'>Mặt bàn chữ nhật 15 x 600 x 1200mm </a></center></td>
</tr>
</table>
</div>
<!--ket thuc -->
2. Tạo template HTML responsive đơn giản
<style>
* {
box-sizing:border-box;
}
.left {
background-color:none;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}
.main {
background-color:#f1f1f1;
padding:20px;
float:left;
width:60%; /* The width is 60%, by default */
}
.right {
background-color:none;
padding:20px;
float:left;
width:20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
.left, .main, .right {
width:100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
<center><h1><font color='green'> GỖ THÔNG TRANG TRÍ VÀ SẢN XUẤT ĐỒ GỖ NỘI THẤT </font>
</h1>
</center>
<div class="left">
<p>Menu ben trai</p>
</div>
<div class="main">
<p>Noi dung chinh</p>
</div>
<div class="right">
<p>Menu ben phai</p>
</div>
CSS - HTML
Ivietpr.com Blog Cá Nhân, Nền Tảng Blogger, Giao Diện Fletro : Xây dựng và phát triển nội dung, theo số liệu phân tích trên cấu trúc content của nhật ký trực tuyến digitalnomad.vn [ Blog Chạy Thử Nghiệm Đa Cấu Trúc ]
