DrawPDF - Interactive Tutorial

1

Header Hành Chính

Trong các văn bản hành chính Việt Nam, phần Header thường chia làm 2 cột: Tên cơ quan và Quốc hiệu.
Đoạn code HTML dưới đây sử dụng table không viền để căn chỉnh layout này.

<!-- Header 2 Cột -->
<table style="width:100%; border:none;">
  <tr>
    <td style="text-align:center; width:40%;">
      <strong>CÔNG TY ABC</strong><br>
      Số: 01/BC-2026
      <hr style="width:30%;">
    </td>
    <td style="text-align:center; width:60%;">
      <strong>CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM</strong><br>
      <em>Độc lập - Tự do - Hạnh phúc</em>
      <hr style="width:20%;">
    </td>
  </tr>
</table>

2

Tiêu Đề Văn Bản

Tiêu đề chính cần nổi bật, căn giữa và thường viết hoa. Chúng ta dùng thẻ h1 hoặc h2 với style căn giữa.

<div style="text-align:center; margin: 30px 0;">
    <h1 style="color:#2c3e50;">BÁO CÁO DOANH THU</h1>
    <em>(Quý I năm 2026)</em>
</div>

3

Nội Dung & Danh Sách

Sử dụng các thẻ paragraph p và danh sách ul/li để trình bày nội dung chi tiết rõ ràng.

<h3>I. Tình Hình Chung</h3>
<p>Trong quý vừa qua, công ty đã đạt được nhiều thành tựu:</p>
<ul>
    <li>Doanh số tăng trưởng <strong>15%</strong>.</li>
    <li>Mở rộng thêm <u>2 chi nhánh</u> mới.</li>
    <li>Tuyển dụng thêm 50 nhân sự.</li>
</ul>

4

Bảng Biểu (Table)

Để hiện thị dữ liệu, table với border-collapse: collapse là lựa chọn tốt nhất để render đẹp khi xuất PDF.

<h3>II. Số Liệu Chi Tiết</h3>
<table border="1" style="width:100%; border-collapse:collapse; text-align:center;">
    <tr style="background:#f2f2f2; font-weight:bold;">
        <td>Tháng</td><td>Doanh Thu ($)</td><td>Trạng Thái</td>
    </tr>
    <tr>
        <td>01/2026</td><td>50,000</td><td>Đạt</td>
    </tr>
    <tr>
        <td>02/2026</td><td>65,000</td><td>Vượt</td>
    </tr>
</table>

🎓 Hướng Dẫn Tương Tác