How to style an HTML table to resemble a spreadsheet like Google Sheets

Other Questions Google docs
1

I’m attempting to design a straightforward spreadsheet application that interfaces with a REST API using JSON. I’ve set up a functioning model that incorporates HTML input fields and selection boxes, but it lacks the polished look of a real spreadsheet.

<table class="spreadsheet">
  <tr>
    <td><div contenteditable="true">Item Name</div></td>
    <td><div contenteditable="true">Category</div></td>
  </tr>
  <tr>
    <td><div contenteditable="true">Cost</div></td>
    <td><div contenteditable="true">45.00</div></td>
  </tr>
</table>

I’m looking to enhance the appearance to align with applications like Google Sheets or Excel. Can this be achieved by substituting the input fields with divs that have the contenteditable attribute, while ensuring that the functionality remains intact? Additionally, how can I implement smooth Tab key navigation across cells, similar to dedicated spreadsheet software?

2

I’ve built similar table layouts for internal tools. To create a consistent look, set table-layout to fixed and assign specific column widths. This will help keep your cell sizes uniform. To enhance interactivity, consider applying a light background color on hover (#f8f9fa). When using contenteditable, ensure you sanitize the innerHTML before sending it to your API, as users might paste formatted content that can cause issues. For keyboard navigation, use preventDefault on the tab key and utilize querySelector to focus on the next td, while also addressing edge cases like wrapping from the last cell of one row to the first cell of the next.

3

contenteditable beats input fields every time. for that spreadsheet feel, add outline: none on focus and throw in a subtle box-shadow like 0 0 3px #4285f4 - looks just like google sheets. don’t forget white-space: pre or your line breaks won’t work in cells. the real challenge is enter vs tab behavior - enter should drop you down a row, tab moves you right.

4

Had the same issue building a data entry interface last year. Contenteditable works great, just watch the styling. Set border-collapse to collapse and add consistent borders to each cell. For that Google Sheets look, use light gray borders (#e0e0e0) and 8-10px cell padding. Make your contenteditable divs fill the whole cell - set them to display block with no margins. For tab navigation, you’ll need JS to catch the tab keypress and focus the next cell’s contenteditable element. I added data attributes to track cell positions - makes the navigation logic way easier.