HTML charoff Attribute

Introduction

The charoff attribute is used in HTML to specify the offset of the alignment character in a table cell. It works together with align="char" and the char attribute to fine-tune where content aligns relative to a chosen character—such as shifting decimal-aligned numbers a few pixels from the decimal point.

What You’ll Learn

Purpose of charoff Attribute

The primary purpose of the charoff attribute is to adjust the horizontal position of text aligned on a character within a table cell. After you choose an alignment character with char, charoff moves the alignment point by a specified number of pixels or a percentage of the cell width. This helps fine-tune the visual presentation of tabular data in legacy HTML documents.

📝 Syntax

Add charoff alongside align="char" and char on a table cell:

<td align="char" char="." charoff="10">12.5</td>

Syntax Rules

• Use with align="char" and char on the same element.
• Value is a length in pixels (e.g. 10) or a percentage (e.g. 5%).
• Positive values offset from the left side of the cell toward the alignment character.
• Applies to table elements: td, th, col, and related sections.
• For modern layouts, use CSS padding or text-align instead.

💎 Values

The charoff attribute accepts numerical values to determine the offset from the alignment character. The most common value types include:

• Pixels — A plain number such as 10 means 10 pixels of offset.
• Percentage — A value like 5% offsets by a percentage of the cell’s width.

<td align="char" char="." charoff="10">12.50</td>
<td align="char" char=":" charoff="5%">9:30</td>

<!-- CSS alternative -->
<style>
  .numeric { text-align: right; padding-right: 10px; }
</style>

Applicable Elements

Examples Gallery

Implementation example with charoff offset and dynamic JavaScript charOff.

<table border="1">
  <tr>
    <td align="char" char="." charoff="10">12.50</td>
    <td align="center">Center-aligned</td>
    <td align="right">Right-aligned</td>
  </tr>
</table>

<td id="dynamicCell" align="char" char=":">Value: 100:200</td>

<script>
  // Dynamically set charoff for a table cell
  document.getElementById("dynamicCell").charOff = "5%";
</script>

♿ Accessibility

• Offset is visual only — Screen readers announce cell text, not charoff positioning.
• Use clear headers — Pair aligned columns with <th scope="col"> labels.
• Do not rely on charoff — Since support is deprecated, use CSS for layouts users depend on.
• Keep content readable — Large offsets can push text awkwardly on narrow screens.
• Test with real data — Verify numeric columns remain scannable without charoff rendering.

💡 Best Practices

• Use the charoff attribute sparingly and only when necessary to adjust alignment of text within table cells.
• Experiment with different charoff values to achieve the desired visual presentation of tabular data in legacy documents.
• Test your tables across different browsers to ensure consistent alignment behavior.