Formatting Issues

How to Left-Align the Second Column in an Excel-to-HTML Table

Kushani Nimanthika Sep 25, 2026 870 views

Question details

The user needs to left-align only the second column of a table exported from Excel to HTML without having to modify the HTML markup of each individual row.

How to Left-Align the Second Column in an Excel-to-HTML Table

Product: Excel
Device & OS: not provided
Scenario: Modifying the CSS styling of an HTML table generated from an Excel spreadsheet export.
Observed behavior: The converted table cells are centered by default, making manual cell-by-cell editing tedious for large tables.

Before you start

Ensure you have access to the HTML file generated from your Excel export and a basic text editor or code editor (such as Notepad, VS Code, or Notepad++) to modify the document styles.

Solution 1Recommended

Apply CSS nth-of-type Selector for the Second Column

The most efficient way to style a specific column across all rows without altering the underlying HTML markup is by using the CSS nth-of-type selector.

This method adds a single CSS rule to the header of your HTML document, which instructs the browser to automatically apply left-alignment to the second table data (td) cell in every row.

Open the HTML file

Right-click your exported HTML file, choose 'Open with', and select a text editor or code editor.

Locate the <head> section

Find the `<head>` and `</head>` tags near the top of your HTML document.

Insert a <style> block

If your document doesn't already have one, add a `<style>` tag inside the `<head>` section.

Add the CSS rule

Paste the following code inside the style block: `td:nth-of-type(2) { text-align: left; }`

Save and preview

Save the HTML file and open it in any web browser to see the second column completely left-aligned.

Efficiency Tip: This method automatically applies the rule to all rows in the table simultaneously, saving you from manually adding inline styles like `align="left"` to hundreds of individual cells.

Solution 2

Use HTML colgroup for Column-wide Styling

If you prefer to structure the alignment directly within the HTML table structure rather than using an external or header CSS block, you can use the HTML `<colgroup>` tag.

WPS Spreadsheet Data Export

Easily Manage and Export Web-Ready Tables with WPS Spreadsheet

WPS Spreadsheet offers a seamless way to create, format, and save data as a web page (HTML). You can apply alignments directly within the visual interface before exporting, eliminating the need for complex manual HTML or CSS edits post-export.

1. Open your data in WPS Spreadsheet: Launch WPS Office and open your spreadsheet file.
2. Format the column visually: Select the entire second column by clicking the column letter header, then click the 'Align Left' icon in the Home tab.
3. Export directly to HTML: Go to Menu > Save As, choose 'Web Page (*.html; *.htm)' from the file type dropdown, and save your document. The alignment will be baked into the export.

Format text alignment visually before exporting to HTML.Fully compatible with Microsoft Excel (.xlsx, .xls) file formats.Free, lightweight, and features an intuitive tabbed interface.Streamlined 'Save as Web Page' functionality for quick web deployment.

microsoft office alternative - wps office

Frequently Asked Questions

Why are my Excel-to-HTML table cells centered by default?

When Excel exports a worksheet to HTML, it often generates global inline CSS based on the default worksheet settings. Standard data tables without explicit column formatting frequently default to centered alignment during the web conversion process.

Will the nth-of-type CSS selector work if my table has merged cells?

If your table includes `colspan` or `rowspan` attributes (merged cells), the `nth-of-type` selector might not reliably target the visual second column across all rows, because the structural index of the `<td>` tags changes depending on the row.

How do I target the second column in only one specific table if I have multiple tables on the page?

You can assign an ID or Class to your specific table (e.g., `<table class="my-table">`), and update your CSS selector to target only that table: `.my-table td:nth-of-type(2) { text-align: left; }`.

Can I use JavaScript instead of CSS to align the column?

Yes, you can write a short JavaScript loop to iterate through table rows (`tr`) and apply `.style.textAlign = 'left'` to `rows[i].cells[1]`. However, CSS is highly recommended as it is faster, cleaner, and requires less processing by the browser.

Document & File Issues