Cell Alignment Horizontal & Vertical

Technical Deep Dive & Specifications

The Table Cell Box Model Differences

Table cells (<th>, <td>) do not follow the standard block formatting context. Key rules from the W3C CSS 2.1 Table Specification include:

1. margin is Ignored: Applying margin: 10px on a <td> or <th> has zero effect. Spacing is controlled exclusively via padding on cells or border-spacing on the table.
2. height is a Minimum Constraint: Setting height: 40px on a <td> acts like min-height. If another cell in the same row requires 80px of content, the row and all cells expand to 80px.
3. Automatic Row Height Calculation: A row's height ($H_{row}$) is defined as: $$H_{row} = \max(\text{Cell}_1 \text{ Height}, \text{Cell}_2 \text{ Height}, \dots, \text{Cell}_n \text{ Height})$$

Vertical Alignment Values in Table Cells

+----------------------------------------------------------------------------------------+
|                      TABLE CELL VERTICAL ALIGNMENT BEHAVIOR                            |
+----------------------------------------------------------------------------------------+
| Value                      | Alignment Mechanics                                       |
+----------------------------+-----------------------------------------------------------+
| vertical-align: top;       | Aligns cell content to the top padding edge of the row.   |
| vertical-align: middle;    | Centers cell content vertically within the row height.    |
|                            | (Default user-agent stylesheet behavior on <th> and <td>).|
| vertical-align: bottom;    | Aligns cell content to the bottom padding edge of the row.|
| vertical-align: baseline;  | Aligns the first text baseline of the cell with the first |
|                            | text baseline of all other baseline cells in the row.     |
+----------------------------------------------------------------------------------------+

BASELINE ALIGNMENT DETAIL:
Cell A: <span style="font-size: 24px;">Big Title</span>
Cell B: <span style="font-size: 14px;">Small Subtitle</span>

Cell A: Big Title
--------=========----------------- <-- Exact shared text baseline
Cell B:           Small Subtitle

Internationalization & Logical Text Alignment

In global web applications, hardcoding text-align: left causes visual problems in Right-to-Left (RTL) languages (such as Arabic, Hebrew, or Persian).

Modern CSS provides CSS Logical Properties:

• text-align: start;: Aligns text to the left in LTR, and to the right in RTL.
• text-align: end;: Aligns text to the right in LTR, and to the left in RTL.

/* Internationalized Table Alignment */
th.label-col, td.label-col {
  text-align: start; /* Automatically flips for RTL languages */
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 46–49 (.v-top, .v-middle, .v-baseline): Exposes discrete vertical alignment utility classes designed specifically for table cells.
• Line 52–54 (.h-start, .h-end, .h-center): Utilizes modern CSS logical properties (start/end) to ensure compatibility with both LTR and RTL scripts.
• Line 57–61 (.user-profile): Utilizes CSS Flexbox inside the table cell. This is the recommended pattern: use the table for overall grid coordinates, and use Flexbox inside individual cells to align icons, avatars, and badges.
• Line 115–136 (<tr>): The first two cells use vertical-align: top so the avatar and job title pin cleanly to the top rail, while the status pill and action button use vertical-align: middle to float centrally within the taller row height.

Expected Browser Render Output

+------------------------------------------------------------------------------------+
| Team Member         | Role & Scope                      |  Status  |       Actions |
+---------------------+-----------------------------------+----------+---------------+
| [SJ] Sarah Jenkins  | Staff Infrastructure Engineer     | [Active] |      [Manage] |
|      sarah@...      | Leads global Kubernetes migration |          |               |
|                     | and multi-region failover...      |          |               |
+------------------------------------------------------------------------------------+