VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML Tuts

HTML là gì? Các thẻ HTML Định dạng trong HTML Tiêu đề trong HTML Đoạn văn trong HTML Liên kết trong HTML Ảnh trong HTML Table trong HTML Danh sách trong HTML Danh sách có thứ tự Danh sách không có thứ tự Danh sách mô tả Form trong HTML Thuộc tính Style Comment trong HTML Bảng màu trong HTML Thuộc tính chung trong HTML

Các thẻ HTML

Thẻ HTML Marquee Thẻ HTML Textarea HTML DOCTYPE Thẻ HTML Title Thẻ HTML meta Thẻ HTML Div Thẻ HTML Pre Thẻ HTML Code Thẻ HTML Label Thẻ HTML Input Thẻ HTML Button Thẻ HTML HR Thẻ HTML BR Thẻ HTML Script Thẻ HTML NoScript Thẻ HTML b Thẻ HTML Quotes

Bài học HTML

Text Link trong HTML Image Link trong HTML Email Link trong HTML Frame trong HTML Iframe trong HTML Block trong HTML Thiết lập màu nền (background) trong HTML Màu trong HTML Font trong HTML Thẻ embed - Đa phương tiện trong HTML Tạo chữ chạy (Marquee) trong HTML Style Sheet trong HTML Sử dụng Javascript trong HTML Layout trong HTML Tổng hợp thuộc tính trong HTML Sự kiện (Event) trong HTML Các Font tham khảo trong HTML Mã hóa ASCII trong HTML Bảng ASCII trong HTML Các thực thể HTML Mã hóa URL trong HTML Mã hóa các ngôn ngữ chuẩn ISO trong HTML Mã hóa ký tự trong HTML

Câu hỏi phỏng vấn

Phỏng vấn HTML
1 / 3
❮ ❯

Layout trong HTML


Sử dụng Javascript trong HTML
Tổng hợp thuộc tính trong HTML

Layout giúp tạo bố cục và làm cho trang web trông đẹp hơn. Việc thiết kế Layout là khá tốn kém thời gian và công sức.

Ngày nay, tất cả các site hiện đại đang sử dụng nền tảng CSS và Javascript để tạo các trang web động. Nhưng bạn có thể tạo ra một Layout đẹp bằng cách đơn giản là sử dụng các table hoặc các thẻ div, span trong HTML kết hợp với các thẻ định dạng. Trong phạm vi bài này, húng tôi sẽ cung cấp cho bạn một vài ví dụ về cách tạo một Layout đơn giản nhưng hiệu quả cho web của bạn bằng cách chỉ sử dụng HTML và các thuộc tính.


Nội dung chính

  • Sử dụng bảng trong HTML
    • Ví dụ sử dụng <table> để tạo layout trong HTML
  • Thiết kế Layout có nhiều cột – Sử dụng bảng trong HTML
    • Ví dụ thiết kế layout có nhiều cột trong HTML
  • Thiết kế Layout - Sử dụng phần tử DIV, SPAN trong HTML
    • Ví dụ sử dụng phần tử DIV, SPAN thiết kết layout trong HTML

Sử dụng bảng trong HTML

Cách phổ biến nhất và đơn giản nhất để tạo ra các layout là sử dụng thẻ <table> trong HTML. Những bảng này sắp xếp các dữ liệu vào các cột và hàng, vì thế bạn có thể lợi dụng hay sử dụng những hàng và cột này theo cách bạn muốn.

Ví dụ sử dụng <table> để tạo layout trong HTML

Ví dụ sau về layout sử dụng một bảng với 3 hàng và 2 cột nhưng cột header và cột footer nối cả hai cột bằng cách sử dụng thuộc tính colspan:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sử dụng bẳng thiết kế Layout trong HTML</title>
</head>
<body>
<table width="100%" border="0">
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <h1>Đây là tiêu đề chính của trang Web</h1>
    </td>
  </tr>
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Main Menu</b><br>
      HTML<br>
      Javascript<br>
      CSS...
    </td>
    <td bgcolor="#eee" width="100" height="200">
        Các công nghệ lập trình web.
    </td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#b5dcb3">
      <center>
      Copyright © 2021 VietTuts.Vn
      </center>
    </td>
  </tr>
</table>
</body>
</html>

Kết quả:

Đây là tiêu đề chính của trang Web

Main Menu
HTML
Javascript
CSS...
Các công nghệ lập trình web.
Copyright © 2021 VietTuts.Vn

Thiết kế Layout có nhiều cột – Sử dụng bảng trong HTML

Bạn có thể thiết kế trang của bạn thành nhiều cột với các phần nội dung khác nhau. Bạn có thể giữ nội dung chính trong cột giữa và cột trái làm cột chứa menu, và cột phải dùng để đặt các quảng cáo. Loại layout này tương tự như cách chúng tôi bố trí trang web hiện tại.

Ví dụ thiết kế layout có nhiều cột trong HTML

Sau đây là một ví dụ tạo một layout 3 cột:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ví dụ thiết kế 3 cột cho layout trong HTML</title>
</head>
<body>
<table width="100%" border="0">
  <tr valign="top">
    <td bgcolor="#aaa" width="50">
      <b>Main Menu</b><br>
      HTML<br>
      Javascript<br>
      CSS...
    </td>
    <td bgcolor="#b5dcb3" width="100" height="200">
        Các công nghệ lập trình web.
    </td>
    <td bgcolor="#aaa" width="20%">
      <b>Right Menu</b><br>
      Java<br>
      .NET<br>
      Python...
    </td>
   </tr>
</table>
</body>
</html>

Kết quả khi chạy đoạn code trên là:

Main Menu
HTML
Javascript
CSS...
Các công nghệ lập trình web. Right Menu
Java
.NET
Python...

Thiết kế Layout - Sử dụng phần tử DIV, SPAN trong HTML

Phần tử <div> là một phần tử cấp khối được sử dụng để tạo nhóm phần tử trong HTML. Trong khi đó, phần tử <span> được sử dụng để tạo nhóm các phần tử nội tuyến trong HTML.

Mặc dù chúng ta có thể tạo ra một layout đẹp với bảng, nhưng bảng không phải là công cụ thiết kế layout. Bảng chỉ thật sự phù hợp khi hiển thị và phân chia dữ liệu.

Ghi chú: Ví dụ này sử dụng Cascading Style Sheet (CSS), vì thế để hiểu được ví dụ này, bạn nên hiểu cách CSS làm việc.

Bạn có thể tham khảo Học CSS cơ bản và nâng cao.

Ví dụ sử dụng phần tử DIV, SPAN thiết kết layout trong HTML

Ví dụ sau chúng tôi sẽ cố gắng đạt được kết quả như trên bằng việc sử dụng thẻ <div> với sự giúp đỡ của CSS.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sử dụng phần tử DIV, SPAN trong HTML thiết kế layout trong HTML</title>
</head>
<body>
<div style="width:100%">
  <div style="background-color:#b5dcb3; width:100%">
      <h1>Đây là tiêu đề chính của trang Web</h1>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:left;">
      <div><b>Main Menu</b></div>
      HTML<br>
      Javascript<br>
      CSS...
  </div>
  <div style="background-color:#eee; height:200px;width:350px;float:left;">
    <p>Các công nghệ lập trình web.</p>
  </div>
  <div style="background-color:#aaa; height:200px;width:100px;float:right;">
      <div><b>Right Menu</b></div>
      Java<br>
      .NET<br>
      Python...
  </div>
  <div style="background-color:#b5dcb3;clear:both">
  <center>
      Copyright © 2021 VietTuts.Vn
  </center>
  </div>
</div>
</body>
</html>

Kết quả:

Đây là tiêu đề chính của trang Web

Main Menu
HTML
Javascript
CSS...

Các công nghệ lập trình web.

Right Menu
Java
.NET
Python...
Copyright © 2021 VietTuts.Vn

Bạn có thể tạo ra một layout đẹp hơn bằng cách sử dụng các thẻ DIV, SPAN với sự giúp đỡ của CSS. Để có nhiều hơn thông tin về CSS, bạn tham khảo học CSS tại VietTuts


Sử dụng Javascript trong HTML
Tổng hợp thuộc tính trong HTML

Recent Updates

Liên kết css với htmlMã hóa ký tự trong HTMLMã hóa các ngôn ngữ chuẩn ISO trong HTMLMã hóa URL trong HTMLCác thực thể HTMLBảng ASCII trong HTMLMã hóa ASCII trong HTMLCác Font tham khảo trong HTMLSự kiện (Event) trong HTMLTổng hợp thuộc tính trong HTMLLayout trong HTMLSử dụng Javascript trong HTMLSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml