ads Blog content marketing Digitalnomad.vn Hợp tác marketing

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
Bài Viết Ngẫu Nhiên

Bạn có thể thích những bài đăng này

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Xưởng sản xuất gỗ ghép cao su / gỗ ghép thông / thớt gỗ / xưởng may rèm cửa
Quảng cáo Ads2
Quảng cáo Ads3

1 Phút dành cho quảng cáo 2

NCC thớt gỗ, ván ghép, mdf
Tắt Ads

Xem Page Nhà Tài Trợ Click here

Tắt Ads

Máy Ép Chậm
Nồi chiên không dầu
Điện Thoại
LapTop Giá Rẻ
Máy xay sinh tố
1368.com.vn