About this set
A resource view for one day: four meeting rooms down the side, the hours from 09:00 to 19:00 across the top and each booking drawn as a coloured bar across the hours it takes. A key below names the five booking types. Use it for room booking, equipment hire, staff rotas or any schedule where several resources share the same hours. The grid is a real HTML table: rooms are row headers with their seat count, hours are column headers, and a booking is a single cell with a colspan equal to its length. Because of that, a screen reader can move along a row and hear each booking with its time range and type, and the empty hours say Free, so availability does not depend on spotting a blank cell. The table has a minimum width of 700 pixels and sits in a scrollable region, so on a phone it scrolls sideways instead of squeezing the labels; the region can be focused and scrolled with the keyboard. Booking colours were picked or darkened so the white labels reach 4.5:1 contrast. The Bootstrap version uses .table and the Tailwind version uses utilities on the same table.
What’s included
- Real table with rooms as row headers and hours as column headers
- Bookings span their hours with colspan
- Free hours and booking type spelled out in hidden text
- Keyboard-scrollable region below 700px
- Plain CSS, Bootstrap .table and Tailwind versions of the same design
Accessibility
Rooms are row headers and hours are column headers, so each booking is announced with its room and hour. Every booking includes its time range and type as visually hidden text, and empty hours read "Free". The scroll region has tabindex="0", an aria-label and a 2px violet focus outline. Nothing animates.
Customise it
Set each booking colour with --c on the .bk element and edit the key to match. Change --rs-muted and --rs-line on .rsc in plain CSS and Bootstrap, or the --color-rs-* theme colours in Tailwind; the room column width is the 118px on the first header.
