.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.spec-table code{background:#F3F4F6;padding:1px 5px;border-radius:3px;font-size:12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Tables

Data tables display structured information in rows and columns. Petrel uses tables extensively for well lists, log data, and property summaries.
## When to use

- Displaying a list of similar objects with multiple attributes per object
- Comparing values across multiple objects
- Enabling bulk actions on multiple selected rows
- Displaying numerical data that users need to scan and compare


## Column types and alignment

Data type
Alignment
Notes
Text (names, labels)
Left
Truncate with ellipsis; show full text in tooltip
Numbers (measurements)
Right
Use consistent decimal places; see Numeric precision
Dates
Left or right
Use ISO 8601 format (YYYY-MM-DD) or the project locale
Status indicators
Center
Icon + text; never colour alone
Actions
Right
Limit to 1–3 icon actions per row; primary action first
## Sorting

Sortable columns must show a sort indicator (ascending/descending arrow) on the active sort column. The sort indicator must be visible to keyboard users, not only visible on mouse hover.

## Row selection

Tables that support row selection must implement the `SelectionPattern` UIA pattern. Single-click selects a row. Shift+click extends the selection. Ctrl+click toggles individual rows. The selection state must be visible without relying on colour alone (use a left border or checkbox).

## Do and Don't

DO
Right-align all numeric columns and use a fixed-width (monospaced) font for measurement values. This allows the user to compare values by scanning vertically down the column — the decimal points must align.
DON'T
Don't show more than 8–10 columns by default. Users cannot scan wide tables without horizontal scrolling. Show the most important columns by default and allow users to configure additional columns.
## Accessibility requirements

- Tables must use the `DataGridPattern` or `GridPattern` UIA pattern.
- Column headers must be accessible as `HeaderItem` in the UIA tree.
- Each cell must be reachable by keyboard (arrow keys within the table, Tab to enter/exit the table).
- Selected rows must be announced to screen readers when selection changes.


### Related pages

Numeric precision
— Number display in table cells
Form controls
— Inline editing in table cells
Custom controls
— UIA patterns for custom grids