Embedding a Google Sheet on your Website: Chỉ dẫn tối ưu nhất

Video how to embed a google sheet

Bạn đã mệt mỏi với việc sao chép và dán các bảng lên trang web của bạn? Đến lúc nâng cao tính chuyên nghiệp của trang web của bạn lên một tầm cao mới. Thay vì gặp khó khăn với khả năng đọc và định dạng, tại sao bạn không nhúng một Google Sheet trực tiếp vào trang web của mình? Không chỉ làm cho dữ liệu của bạn trông mượt mà và chuyên nghiệp hơn, mà còn cho phép bạn dễ dàng bao gồm các chức năng, hình ảnh ô và đồ thị. Hơn nữa, bất kỳ thay đổi nào bạn thực hiện trên Google Sheet cũng sẽ tự động cập nhật trên trang web của bạn. Nghe có vẻ tuyệt vời, phải không? Hãy tiếp tục đọc để tìm hiểu thêm!

Định dạng một Google Spreadsheet đã nhúng

Trước khi bạn có thể nhúng một Google Sheet vào trang web của mình, bạn cần đảm bảo rằng bảng tính được định dạng đúng cách. Dưới đây là một số điều cần xem xét trong quá trình tạo hoặc định dạng bảng tính của bạn:

  1. Sử dụng các tùy chọn định dạng văn bản như in đậm để tăng khả năng đọc.
  2. Đặt tất cả dữ liệu bạn muốn hiển thị trên một tab bảng tính duy nhất.
  3. Giữ kích thước bảng tính nhỏ gọn để giảm việc cuộn trang.
  4. Dòng đầu tiên chỉ nên chứa tên cột.

Bằng cách lập kế hoạch cấu trúc của bảng tính trước, bạn có thể tránh nhiều vấn đề về định dạng trong tương lai. Hãy nhớ rằng một bảng tính được định dạng tốt sẽ tiết kiệm thời gian và đảm bảo một quá trình nhúng trơn tru.

Remove headings to embed a Google Sheet on a website

Đôi khi, các mẫu hoặc các bảng tính trên web trong Google Sheets có các tiêu đề trên cùng có thể gây ra vấn đề khi nhúng. Để giải quyết vấn đề này, hãy chắc chắn xóa hàng trên cùng để luôn hiển thị tiêu đề ở hàng đầu tiên của bảng tính.

Làm thế nào để nhúng một Google Sheet bằng cách Sử dụng “Publish to web”

Bây giờ rằng bảng tính của bạn đã được định dạng đúng cách, hãy cùng tìm hiểu quy trình nhúng nó vào trang web của bạn bằng cách sử dụng tính năng “Publish to web” của Google Sheets. Dưới đây là hướng dẫn từng bước:

  1. Mở bảng tính và nhấp vào nút File trong thanh công cụ trên Sheets.
  2. Trong menu thả xuống, nhấp vào nút Chia sẻ, điều đó sẽ mở một menu nhỏ hơn.
  3. Từ đó, chọn tùy chọn Public tới web. Điều này sẽ mở một menu xuất hiện giữa màn hình.

Use the embed option

  1. Trong menu xuất hiện, nhấp vào tab Embed để hiển thị dữ liệu từ bảng tính Google trên trang web của bạn.
  2. Chọn phần bảng tính bạn muốn xuất bản và sau đó nhấp vào nút Xuất bản màu xanh lá cây.
  3. Một hộp thoại xác nhận sẽ xuất hiện. Nhấp vào OK để tiếp tục.

Copy the source text

  1. Sau khi xác nhận, trong tab Embed, nhấn giữ và sao chép mã trong hộp văn bản.
  2. Dán mã vào trang web của bạn để nhúng Google Sheet.

Nhúng Google Sheets trong WordPress

Nếu bạn đang sử dụng WordPress, việc nhúng một bảng tính Google trở nên dễ dàng hơn bao giờ hết. Chỉ cần làm theo các bước sau:

  1. Trong WordPress, chỉnh sửa trang mà bạn muốn nhúng bảng tính vào.
  2. Nhấp vào biểu tượng ba chấm ở góc trên bên phải của trình chỉnh sửa và chọn tùy chọn Mã nguồn trong tab Trình soạn thảo.
  3. Cửa sổ trình soạn mã sẽ mở ra. Dán mã iframe của Google Sheets (cùng mã từ phần trước) vào trang mà bạn muốn nhúng nó.
  4. Nhấp vào Lưu nháp và sau đó Xem trước để xem trước trang sẽ nhìn như thế nào sau khi được xuất bản.

Sau khi xem trước bảng tính đã nhúng, bạn có thể xuất bản nó hoặc chỉnh sửa hiển thị theo ý muốn.

Tùy chỉnh Bảng tính đã nhúng

Để đảm bảo bảng tính đã nhúng khớp hoàn hảo với trang web của bạn, bạn có thể tùy chỉnh kích thước của nó bằng cách thay đổi mã iframe của Google Sheets. Thêm height="x"width="x" ngay sau đoạn văn bản iframe để điều chỉnh kích thước.

Sau khi đã thực hiện các thay đổi, lưu nháp và xem trước lại để xem kích thước được cập nhật. Điều này giúp bạn có thể làm cho bảng tính nhỏ hơn hoặc lớn hơn tùy thuộc vào nội dung và bố cục của trang web của bạn.

Hãy nhớ rằng kích thước bảng sẽ không thay đổi bất kể kích thước cửa sổ, điều này có thể gây máy mò trên các màn hình nhỏ như thiết bị di động. Để giải quyết vấn đề này, bạn có thể sử dụng mã CSS phản ứng trong thiết kế trang web của bạn.

Cập nhật Bảng tính đã nhúng theo thời gian thực

Một trong những tính năng đáng chú ý nhất của việc nhúng Google Sheets trên trang web của bạn là khả năng cập nhật bảng tính theo thời gian thực. Bất kỳ thay đổi nào bạn thực hiện trên bảng tính sẽ tự động phản ánh trên phiên bản đã nhúng.

Automatically update the sheet on the site

Để kích hoạt cập nhật tự động, hãy vào trang Google Sheets và mở lại cửa sổ “publish to web”. Trong phần Nội dung và cài đặt đã xuất bản, nhấp để bật tùy chọn Tự động xuất bản khi có thay đổi.

Bây giờ, bạn có thể thay đổi bảng tính và chúng sẽ được cập nhật ngay lập tức trên trang web nơi nó được nhúng. Tính năng cập nhật thời gian thực này hoàn hảo để hiển thị thông tin trực tiếp cho người xem trang web của bạn.

Câu hỏi thường gặp

Làm cách nào để nhúng Google Sheets vào một trang web?

Có hai phương pháp để nhúng Google Sheets vào một trang web. Phương pháp đầu tiên bao gồm tải xuống bảng tính dưới dạng mã HTML bằng cách nhấp vào File, sau đó Tải xuống, và chọn Trang web (.html, nén). Tuy nhiên, phương pháp này không hỗ trợ cập nhật thời gian thực. Để nhúng Google Sheets với cập nhật tự động, hãy sử dụng tùy chọn Publish to web.

Làm thế nào để xuất bản Google Sheets lên web?

Để xuất bản một bảng tính, hãy mở nó và nhấp vào nút File. Sau đó, nhấp vào Chia sẻ và chọn tùy chọn Public tới web. Trong tab Nhúng, hãy chọn phần của bảng tính bạn muốn xuất bản, nhấp vào nút màu xanh lá cây Xuất bản, và xác nhận bằng cách nhấp vào OK. Sau khi xác nhận, sao chép mã từ ô văn bản trong tab Nhúng và dán vào trang web của bạn để nhúng Google Sheet.

Tóm lược

Chúng ta đã đề cập đến hai phương pháp đơn giản để nhúng Google Sheet vào trang web của bạn. Nếu phương pháp đầu không hoạt động cho bạn, hãy thử sao chép chỉ các dữ liệu bạn cần vào một bảng tính mới và sau đó nhúng nó. Vẫn gặp khó khăn? Không lo! Hãy để lại bình luận để chúng tôi giúp bạn.

Đừng quên ghé thăm Crawlan.com để tìm hiểu thêm những mẹo và thủ thuật thú vị! Chúc bạn thật nhiều niềm vui nhúng!

Related posts