Đầu ra javascript vào bảng html

Bảng HTML là nguồn dữ liệu tốt nhất trên web. Chúng dễ hiểu và có thể chứa một lượng dữ liệu khổng lồ ở định dạng dễ đọc và dễ hiểu. Khả năng cạo các bảng HTML là một kỹ năng quan trọng cần phát triển đối với bất kỳ nhà phát triển nào quan tâm đến khoa học dữ liệu hoặc phân tích dữ liệu nói chung

Trong hướng dẫn này, chúng ta sẽ đi sâu hơn vào các bảng HTML và xây dựng một tập lệnh đơn giản nhưng mạnh mẽ để trích xuất dữ liệu dạng bảng và xuất nó sang tệp CSV

Bảng Web HTML là gì?

Bảng HTML là một tập hợp các hàng và cột được sử dụng để hiển thị thông tin ở định dạng lưới trực tiếp trên trang web. Chúng thường được sử dụng để hiển thị dữ liệu dạng bảng, chẳng hạn như bảng tính hoặc cơ sở dữ liệu và là nguồn dữ liệu tuyệt vời cho các dự án của chúng tôi

Từ dữ liệu thể thao và dữ liệu thời tiết đến sách và dữ liệu của tác giả, hầu hết các bộ dữ liệu lớn trên web đều có thể truy cập được thông qua các bảng HTML vì mức độ tuyệt vời của chúng khi hiển thị thông tin ở định dạng có cấu trúc và dễ điều hướng

Tin tuyệt vời cho chúng tôi là, không giống như nội dung được tạo động, dữ liệu của bảng HTML trực tiếp bên trong thành phần bảng trong tệp HTML, nghĩa là chúng tôi có thể thu thập tất cả thông tin chúng tôi cần chính xác như chúng tôi làm với các thành phần khác của trang web –

Hiểu cấu trúc của bảng HTML

Mặc dù bạn chỉ có thể nhìn thấy các cột và hàng ở giao diện người dùng, nhưng các bảng này thực sự được tạo bằng một vài thẻ HTML khác nhau

• const axios = require("axios");
  const cheerio = require("cheerio");
  const ObjectsToCsv = require("objects-to-csv");
  
  

  1. Nó đánh dấu sự bắt đầu của một bảng HTML

• const axios = require("axios");
  const cheerio = require("cheerio");
  const ObjectsToCsv = require("objects-to-csv");
  
  

  2. Cho biết một hàng trong bảng

• const axios = require("axios");
  const cheerio = require("cheerio");
  const ObjectsToCsv = require("objects-to-csv");
  
  

  3. Định nghĩa một ô trong bảng

Nội dung nằm bên trong thẻ

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

3 và

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

2 được sử dụng để tạo hàng. Nói cách khác. Bảng > Hàng > Ô. bảng > tr > phân cấp td được tuân theo để tạo bảng HTML

Một ô đặc biệt có thể được tạo bằng cách sử dụng thẻ

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

6 có nghĩa là tiêu đề bảng. Về cơ bản, các ô đầu tiên của hàng đầu tiên có thể được tạo bằng cách sử dụng thẻ

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

6 để cho biết hàng là tiêu đề của bảng

Dưới đây là một ví dụ để tạo một bảng HTML dựa trên hai hàng và hai cột đơn giản

 

 
Pet 1
 
Pet 2
 
 

 
Dog
 
Cat
 

Tuy nhiên, có một sự khác biệt lớn khi cạo các bảng HTML. Không giống như các phần tử khác trên trang web, bộ chọn CSS nhắm mục tiêu đến các ô và hàng tổng thể – hoặc thậm chí toàn bộ bảng – bởi vì tất cả các phần tử này thực sự là các thành phần của phần tử

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

1

Thay vì nhắm mục tiêu bộ chọn CSS cho từng điểm dữ liệu, chúng tôi muốn cạo, chúng tôi sẽ cần tạo một danh sách có tất cả các hàng của bảng và lặp qua chúng để lấy dữ liệu từ các ô của chúng

Nếu chúng tôi hiểu logic này, việc tạo tập lệnh của chúng tôi thực sự khá đơn giản

Cạo các bảng HTML sang CSV bằng nút. JS

Nếu đây là lần đầu tiên bạn sử dụng Node. JS để quét web, có thể hữu ích khi xem qua một số hướng dẫn trước đây của chúng tôi

• Quét web bằng JavaScript và nút. js
• Cách xây dựng một công cụ quét LinkedIn miễn phí
• Cách xây dựng một công cụ quét dữ liệu bóng đá từng bước

Tuy nhiên, chúng tôi sẽ giữ hướng dẫn này thân thiện với người mới bắt đầu nhất có thể để bạn có thể sử dụng nó ngay cả khi mới bắt đầu

Ghi chú. Đối với nút. Hướng dẫn cài đặt JS, vui lòng tham khảo bài viết đầu tiên trong danh sách

Đối với dự án hôm nay, chúng ta sẽ xây dựng một trình quét web bằng Axios và Cheerio để quét dữ liệu nhân viên được hiển thị trên https. //dữ liệu. mạng/ví dụ/kiểu dáng/hiển thị. html

Chúng tôi sẽ trích xuất tên, chức vụ, văn phòng, tuổi, ngày bắt đầu và mức lương cho từng nhân viên, sau đó gửi dữ liệu tới CSV bằng gói ObjectsToCsv

1. Chuẩn bị tệp của chúng tôi

Để bắt đầu dự án của chúng ta, hãy tạo một thư mục mới có tên là html-table-scraper, mở thư mục mới trên VScode (hoặc trình chỉnh sửa mã tùy chọn của bạn) và mở một thiết bị đầu cuối mới

Trong thiết bị đầu cuối, chúng tôi sẽ chạy

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

9 để bắt đầu một Nút mới. dự án JS. Bây giờ bạn sẽ có một tệp JSON mới trong thư mục của mình

Tiếp theo, chúng tôi sẽ cài đặt các phụ thuộc của mình bằng các lệnh sau

• trục.

  const axios = require("axios");
  const cheerio = require("cheerio");
  const ObjectsToCsv = require("objects-to-csv");
  
  

  00
• cổ vũ.

  const axios = require("axios");
  const cheerio = require("cheerio");
  const ObjectsToCsv = require("objects-to-csv");
  
  

  01
• Đối tượngToCsv.

  const axios = require("axios");
  const cheerio = require("cheerio");
  const ObjectsToCsv = require("objects-to-csv");
  
  

  02

Cài đặt một lệnh của chúng tôi.

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

03

Bây giờ chúng ta có thể tạo một tệp mới có tên là tablecraper. js và nhập các phụ thuộc của chúng tôi ở trên cùng

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

Ngoài ra, dự án của bạn sẽ trông như thế này

2. Kiểm tra trang đích bằng DevTools

Trước khi viết code, chúng ta cần hiểu website có cấu trúc như thế nào. Có, tất cả các bảng đều sử dụng cấu trúc cơ bản, nhưng điều đó không có nghĩa là tất cả đều được tạo như nhau

Điều đầu tiên chúng ta cần xác định là trên thực tế đây có phải là một bảng HTML hay không. Các trang web sử dụng JavaScript để đưa dữ liệu vào bảng của họ là điều rất phổ biến, đặc biệt nếu có bất kỳ dữ liệu thời gian thực nào liên quan. Đối với những trường hợp đó, chúng tôi sẽ phải sử dụng một cách tiếp cận hoàn toàn khác như sử dụng trình duyệt không đầu

Để kiểm tra xem dữ liệu có nằm trong tệp HTML hay không, tất cả những gì chúng ta cần làm là sao chép một số điểm dữ liệu - giả sử tên - và tìm nó trong mã nguồn của trang

Chúng tôi cũng làm như vậy đối với các tên và điểm dữ liệu khác chỉ để đảm bảo và vâng, tất cả dữ liệu đều có sẵn theo ý của chúng tôi. Một bất ngờ thú vị khác là tất cả các hàng của bảng đều nằm trong HTML thô, mặc dù dường như có một số loại phân trang ở giao diện người dùng

Ngoài ra, bây giờ chúng tôi cũng biết rằng có tổng cộng 57 hàng cần cạo. Điều này rất quan trọng vì chúng tôi có thể biết liệu chúng tôi có thực sự lấy tất cả dữ liệu có sẵn hay không

Điều thứ hai chúng tôi muốn kiểm tra trực tiếp trên trình duyệt là bộ chọn của chúng tôi. Thay vì gửi một loạt các yêu cầu không cần thiết, chúng ta có thể sử dụng bảng điều khiển của trình duyệt để lấy các phần tử bằng cách sử dụng

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

04

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

05

Nếu chúng ta vào bàn điều khiển và gõ

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

06, nó sẽ trả về bốn bảng khác nhau

Di chuột qua các bàn, chúng tôi nhanh chóng nhận ra bàn đầu tiên (số 0) là đúng. Vì vậy, hãy làm lại nhưng chỉ định lớp - trong danh sách được biểu thị bằng dấu chấm (. )

Tuyệt vời, chúng ta đang tiến một bước gần hơn đến dữ liệu của mình

Bằng cách xem xét kỹ hơn, dữ liệu của bảng được bọc quanh một thẻ

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

07, vì vậy, hãy thêm nó vào bộ chọn của chúng tôi để đảm bảo rằng chúng tôi chỉ lấy các hàng chứa dữ liệu mà chúng tôi muốn

Cuối cùng, chúng tôi sẽ muốn lấy tất cả các hàng và xác minh rằng bộ chọn của chúng tôi đang lấy toàn bộ 57 hàng

Ghi chú. Bởi vì chúng tôi đang sử dụng bảng điều khiển để chọn các thành phần trên HTML được hiển thị, nên chúng tôi cần đặt tổng số mục được hiển thị thành 100. Nếu không, bộ chọn của chúng tôi trên bảng điều khiển sẽ chỉ hiển thị 10 mục nút

Với tất cả thông tin này, bây giờ chúng ta có thể bắt đầu viết mã của mình

3. Gửi yêu cầu HTTP của chúng tôi và phân tích cú pháp HTML thô

Axios giúp việc gửi các yêu cầu HTTP bên trong một

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

08 trở nên cực kỳ dễ dàng. Tất cả những gì chúng ta cần làm là tạo một hàm async và chuyển URL tới Axios trong một hằng số có tên là

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

09. Chúng tôi cũng sẽ ghi mã trạng thái của phản hồi (phải là 200 cho một yêu cầu thành công)

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

0

Ghi chú. Bạn có thể đặt tên cho các biến này theo ý muốn, nhưng hãy giữ chúng mang tính mô tả nhất có thể

Tiếp theo, chúng tôi sẽ lưu trữ dữ liệu từ phản hồi (HTML thô) vào một hằng số mới có tên là html, để sau đó chúng tôi có thể chuyển dữ liệu đó cho Cheerio để phân tích cú pháp bằng cách sử dụng

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

20

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

2

4. Lặp qua các hàng của bảng HTML

Sử dụng bộ chọn mà chúng tôi đã kiểm tra trước đây, hãy chọn tất cả các hàng bên trong bảng HTML

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

4

Đối với mục đích thử nghiệm, hãy để bảng điều khiển. log() độ dài của allRows để xác minh rằng thực sự chúng tôi đã chọn tất cả các hàng mục tiêu của mình

57 chính xác là những gì chúng tôi đang hướng tới

Tất nhiên, để xem qua danh sách các hàng, chúng ta sẽ sử dụng phương thức

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

21, nhưng còn một điều nữa chúng ta cần tìm hiểu. thứ tự các ô

Không giống như các phần tử HTML phổ biến, các ô không có một lớp duy nhất được gán cho chúng. Vì vậy, cố gắng cạo từng điểm dữ liệu bằng một lớp CSS có thể là một mớ hỗn độn. Thay vào đó, chúng tôi sẽ nhắm mục tiêu vào vị trí của

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

3 trong hàng của nó

Nói cách khác, chúng tôi sẽ yêu cầu tập lệnh của mình đi đến từng hàng, chọn tất cả các ô bên trong hàng, sau đó lưu trữ từng điểm dữ liệu trong một biến dựa trên vị trí của nó trong hàng

Ghi chú. trong nút. JS, tất cả các danh sách bắt đầu từ 0. Vì vậy, vị trí đầu tiên sẽ là [0] và ô thứ hai sẽ là [1]

Nhưng làm thế nào để chúng ta biết đó là vị trí nào?

Bây giờ chúng ta đã biết vị trí của mỗi phần tử so với phần còn lại, đây là trình phân tích cú pháp đã hoàn thành

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

7

5. Đẩy dữ liệu đã cạo vào một mảng trống

Nếu chúng tôi

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

23 dữ liệu đã loại bỏ, chúng tôi sẽ thấy rằng chúng tôi đang loại bỏ văn bản ra khỏi từng ô, nhưng với kết quả rất lộn xộn – điều này khiến việc tạo tệp CSV của chúng tôi trở nên khó khăn hơn

Vì vậy, trước khi xuất dữ liệu của mình, hãy sắp xếp thứ tự cho dữ liệu bằng cách đẩy dữ liệu vào một mảng trống để tạo một danh sách nút đơn giản

Đầu tiên, tạo một mảng trống bên ngoài hàm chính – nếu bạn tạo mảng trống bên trong hàm, nó sẽ bị ghi đè sau mỗi lần lặp lại, đây không phải là điều chúng ta muốn

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

9

Sau đó, như một phần của trình phân tích cú pháp của chúng tôi, hãy sử dụng. phương thức push() để lưu trữ dữ liệu của bạn trong danh sách trống mà chúng tôi đã tạo

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

0

Như mọi khi, hãy

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

23 độ dài của employeeData để đảm bảo rằng chúng ta hiện có 57 mục trong đó

Đối với ngữ cảnh trực quan, chúng ta cũng có thể ghi nhật ký mảng để xem những gì được lưu trữ bên trong

Như chúng ta có thể thấy, tất cả dữ liệu hiện được lưu trữ bên trong các mục nút chứa mọi phần dữ liệu ở định dạng có cấu trúc

6. Gửi dữ liệu đã cạo vào tệp CSV

Với dữ liệu của chúng tôi được sắp xếp, chúng tôi có thể chuyển danh sách của mình tới

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

25 và nó sẽ tạo tệp cho chúng tôi mà không cần làm gì thêm

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

3

Tất cả những gì chúng ta cần làm là tạo một đối tượng csv mới và chuyển danh sách tới

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

25, sau đó bảo nó lưu nó vào máy của chúng ta bằng cách cung cấp đường dẫn

7. Trình quét bảng HTML [Mã đầy đủ]

Xin chúc mừng, bạn đã chính thức tạo trình quét bảng HTML đầu tiên của mình. So sánh mã của bạn với cơ sở mã đã hoàn thành của hướng dẫn này để đảm bảo bạn không bỏ sót điều gì

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

5

Sau khi chạy tập lệnh của chúng tôi, một tệp CSV mới sẽ được tạo trong thư mục dự án của chúng tôi

Giờ đây, bạn có thể sử dụng dữ liệu này để chạy phân tích sâu hơn như so sánh lương dựa trên chức danh công việc hoặc ngày bắt đầu hoặc tìm kiếm xu hướng trong bộ dữ liệu công việc lớn hơn

Tất nhiên, tập lệnh này có thể được điều chỉnh để xử lý hầu hết mọi bảng HTML mà bạn tìm thấy, vì vậy hãy luôn cởi mở với những khả năng mới và

Tránh bị chặn. Tích hợp ScraperAPI trong một dòng mã

Trước khi bạn ra đi, còn một việc nữa chúng ta cần làm để làm cho máy cạo của mình bền hơn và đó là xử lý các hệ thống và kỹ thuật chống cạo. Rất nhiều trang web không muốn bị loại bỏ bởi vì, thật đáng buồn, rất nhiều công cụ dọn dẹp được tối ưu hóa kém và có xu hướng làm hại trang web của họ

Vì lý do đó, bạn cần tuân theo một số phương pháp hay nhất về quét web để đảm bảo rằng bạn đang xử lý các dự án của mình một cách chính xác mà không gây quá nhiều áp lực lên trang web mục tiêu của bạn, cũng như không đặt tập lệnh và IP của bạn vào nguy cơ bị cấm hoặc đưa vào danh sách đen – khiến nó

Để xử lý xoay vòng IP, kết xuất JavaScript, tìm và triển khai các tiêu đề HTTP, CAPTCHA, v.v., tất cả những gì chúng ta cần làm là gửi yêu cầu ban đầu của mình thông qua máy chủ của ScraperAPI. API này sẽ sử dụng nhiều năm phân tích thống kê và học máy để xác định đâu là sự kết hợp tốt nhất giữa tiêu đề và proxy, xử lý mọi yêu cầu không thành công và tính thời gian yêu cầu của chúng tôi để nó không làm quá tải máy chủ mục tiêu của chúng tôi

Thêm nó vào tập lệnh của chúng tôi cũng đơn giản như thêm chuỗi này vào URL được chuyển đến Axios

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

0

Hãy nhớ thay thế

const axios = require("axios");
const cheerio = require("cheerio");
const ObjectsToCsv = require("objects-to-csv");

27 bằng khóa API của riêng bạn – bạn có thể tạo khóa này bằng cách tạo tài khoản ScraperAPI miễn phí

Yêu cầu ban đầu của bạn sẽ mất nhiều thời gian hơn một chút trong khi ScraperAPI xử lý mọi vấn đề phức tạp cho bạn và sẽ chỉ sử dụng tín dụng API cho các yêu cầu thành công

Bây giờ đến lượt của bạn. Quét web là tất cả về thực hành. Mỗi trang web là một câu đố khác nhau nên không có cách nào để thực hiện mọi việc. Thay vào đó, hãy tập trung vào việc sử dụng nền tảng để đón nhận những thử thách phức tạp hơn

Nếu bạn muốn tiếp tục luyện tập, một vài trang web chúng tôi đề xuất là

• https. //dấu ngoặc kép. để cạo. com/
• https. //sách. để cạo. com/
• https. //dữ liệu. mạng/ví dụ/chỉ mục

Cho đến lần sau, hạnh phúc cạo

Thông tin về các Tác giả

Zoltan Bettenbuk

Zoltan Bettenbuk là CTO của ScraperAPI - giúp hàng nghìn công ty truy cập vào dữ liệu họ cần. Anh ấy là một chuyên gia nổi tiếng về xử lý dữ liệu và quét web. Với hơn 15 năm kinh nghiệm trong lĩnh vực phát triển phần mềm, quản lý sản phẩm và lãnh đạo, Zoltan thường xuyên công bố những hiểu biết của mình trên blog của chúng tôi cũng như trên Twitter và LinkedIn

Mục lục

Những bài viết liên quan

Cách cạo dữ liệu quảng cáo Google của đối thủ cạnh tranh để cải thiện chính bạn

Quảng cáo trả tiền (PPC) là một không gian cạnh tranh, đòi hỏi các chiến thuật thông minh để thành công. Khi kênh quảng cáo này phát triển và chi phí quảng cáo tiếp tục tăng đáng kể, chúng tôi đã

đọc bài báo

Ngày 21 tháng 11 năm 2022

Cách sử dụng Web Scraping để trao quyền cho các quyết định tiếp thị

Thu hút đúng người tiêu dùng và chuyển đổi họ thành khách hàng trả tiền luôn đòi hỏi sự cân bằng giữa tính sáng tạo, kiến ​​thức ngành và sự hiểu biết rõ ràng về người tiêu dùng.

đọc bài báo

Ngày 26 tháng 10 năm 2022

Quét web trong thương mại điện tử. Các trường hợp sử dụng và mẹo để cạo theo tỷ lệ

Mua sắm trực tuyến không có gì mới, nhưng chúng tôi đã chứng kiến ​​sự tăng trưởng theo cấp số nhân về doanh số bán hàng Thương mại điện tử trong những năm gần đây. Nguồn Nhờ đại dịch, việc áp dụng Thương mại điện tử đã giảm

JavaScript có thể xuất HTML không?

JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau. Viết vào phần tử HTML, sử dụng InternalHTML. Ghi vào đầu ra HTML bằng cách sử dụng tài liệu. write() .

Làm cách nào để tìm nạp dữ liệu từ cơ sở dữ liệu trong JavaScript và hiển thị bảng HTML?

Làm cách nào để lấy dữ liệu từ cơ sở dữ liệu và hiển thị ở dạng HTML? .

Kết nối PHP với cơ sở dữ liệu MySQL. Bạn có thể sử dụng truy vấn kết nối cơ sở dữ liệu sau để kết nối PHP với cơ sở dữ liệu MySQL

Chèn dữ liệu vào bảng PHPMyAdmin

Lấy dữ liệu từ bảng MySQL

Hiển thị dữ liệu trong bảng HTML

Tự kiểm tra để chèn dữ liệu

Làm cách nào chúng ta có thể đặt dữ liệu động trong một bảng trong HTML?

Cách thêm dữ liệu động vào bảng trong HTML? .

hàm addRow(tableID) {

bảng var = tài liệu. getElementById(bảngID);

var rowCount = bảng. hàng. chiều dài;

hàng var = bảng. insertRow(rowCount);

//Cột 1

var ô1 = hàng. chènCell(0);

var phần tử1 = tài liệu. createElement(“đầu vào”);

phần tử1. gõ = “nút”;

Bạn có thể đặt một bảng bên trong một biểu mẫu HTML không?

Cụ thể, bạn có thể đặt một bảng bên trong một biểu mẫu hoặc ngược lại và điều này thường rất hữu ích. Nhưng bạn cần phải hiểu những gì bạn đang làm. Các bảng và biểu mẫu có thể được lồng vào nhau theo một trong hai cách. Nhưng nếu bạn đặt biểu mẫu vào bảng, thì mỗi biểu mẫu phải được đưa hoàn toàn vào một ô của bảng (thực tế là một phần tử TD).