HTML char Attribute

Introduction

The char attribute is a legacy HTML table attribute used with align="char" to specify a single character on which cell content should align. It was designed so numeric columns could line up on a decimal point or other delimiter, making tabular data easier to scan.

What You’ll Learn

Purpose of char Attribute

The primary purpose of the char attribute is to define which character acts as the alignment anchor when align="char" is set on a table cell or column. This lets numbers in a column share a common vertical alignment point—most often the decimal point—so values like 12.5, 9.75, and 100.2 read cleanly in financial or scientific tables.

📝 Syntax

Add align="char" and char together on a table cell or header:

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

Syntax Rules

• Must be used with align="char" on the same element.
• Value is a single character, such as . (decimal), ,, or $.
• Applies to table elements: td, th, tr, col, and related table sections.
• Pair with charoff to shift the alignment position by pixels.
• For modern layouts, use CSS text-align: right and font-variant-numeric: tabular-nums.

💎 Values

The char attribute accepts a single character value. The character defines the alignment anchor when align="char" is active. Common choices include:

• . — Decimal point alignment for numeric scores, prices, or measurements.
• , — Thousands separator alignment in locale-specific number formats.
• $ or € — Currency symbol alignment in financial tables.
• : — Time values such as 9:30 or 12:05.

<th align="char" char=".">Score</th>
<td align="char" char=".">12.5</td>
<td align="char" char=".">100.2</td>

<!-- CSS alternative -->
<style>
  .numeric { text-align: right; font-variant-numeric: tabular-nums; }
</style>

Applicable Elements

Examples Gallery

Implementation example with decimal char alignment and dynamic JavaScript setAttribute.

<table border="1">
  <tr>
    <th>Name</th>
    <th align="char" char=".">Score</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td align="char" char=".">12.5</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td align="char" char=".">9.75</td>
  </tr>
  <tr>
    <td>Carol</td>
    <td align="char" char=".">100.2</td>
  </tr>
</table>

<th id="scoreHeader">Score</th>

<script>
  // Select the header cell
  let scoreHeader = document.getElementById("scoreHeader");

  // Dynamically add char alignment
  scoreHeader.setAttribute("align", "char");
  scoreHeader.setAttribute("char", ".");
</script>

♿ Accessibility

• Alignment aids comprehension — Well-aligned numeric columns help all users compare values quickly.
• Do not rely on char alone — Screen readers read cell text, not visual alignment. Use clear headers and captions.
• Prefer semantic tables — Use <th scope="col"> for column headers so assistive tech understands structure.
• Use CSS for reliable layout — Since char is deprecated, CSS alignment is more predictable across browsers.
• Test with real data — Ensure mixed-length numbers remain readable on small screens.

💡 Best Practices

• Use the char attribute sparingly and only when maintaining legacy table markup.
• Ensure the character you choose is meaningful and present in the cell content (e.g., a decimal point in numeric values).
• Test table appearance across browsers, since character alignment support varies widely in modern engines.