Most Common Way of Writing a HTML Table with Vertical Headers

table{
    width: 100%;
}
th{
   text-align: center;
}
th, td{
    border: 1px solid #333;
}

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<table>
  <thead>
    <tr aria-hidden="true">
      <th colspan="4">H1-A</th>
      <th colspan="3">H1-B</th>
      <th colspan="3">H1-C</th>
    </tr>
    <tr aria-hidden="true">
      <th>H2-A</th>
      <th colspan="2">H2-B</th>
      <th>H2-C</th>
      <th colspan="3">H2-D</th>
      <th colspan="3">H2-E</th>
    </tr>
    <tr>
      <th scole="col" height="10"><span class="visually-hidden">H1-A, H2-A,</span>H3-A</th>
      <th scole="col"><span class="visually-hidden">H1-A, H2-B,</span>H3-B</th>
      <th scole="col"><span class="visually-hidden">H1-A, H2-B,</span>H3-C</th>
      <th scole="col"><span class="visually-hidden">H1-A, H2-C,</span>H3-D</th>
      <th scole="col"><span class="visually-hidden">H1-B, H2-D,</span>H3-E</th>
      <th scole="col"><span class="visually-hidden">H1-B, H2-D,</span>H3-F</th>
      <th scole="col"><span class="visually-hidden">H1-B, H2-D,</span>H3-G</th>
      <th scole="col"><span class="visually-hidden">H1-C, H2-E,</span>H3-I</th>
      <th scole="col"><span class="visually-hidden">H1-C, H2-E,</span>H3-J</th>
      <th scole="col"><span class="visually-hidden">H1-C, H2-E,</span>H3-K</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data 1a</td>
      <td>data 2a</td>
      <td>data 3a</td>
      <td>data 4a</td>
      <td>data 5a</td>
      <td>data 6a</td>
      <td>data 7a</td>
      <td>data 8a</td>
      <td>data 9a</td>
      <td>data 10a</td>
    </tr>
    <tr>
      <td>data 1b</td>
      <td>data 2b</td>
      <td>data 3b</td>
      <td>data 4b</td>
      <td>data 5b</td>
      <td>data 6b</td>
      <td>data 7b</td>
      <td>data 8b</td>
      <td>data 9b</td>
      <td>data 10b</td>
    </tr>
  </tbody>
</table>

How to markup data cell that also functions as row header in HTML5?

Just because a cell is a TH, does not mean it is not also data. You should use TH with scope="row". In HTML4, you could place a scope attribute on a TD cell, in HTML5 it is no longer acceptable to have a scope attribute an a TD cell.

<table>
    <thead>
        <tr>
            <th scope="col">Principle</th>
            <th scope="col">Corresponding Guidelines</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Never leave a child unattended</th>
            <td>...</td>
        </tr>
    </tbody>
</table>

In general most data tables have a cell that could be considered a header cell. I have seen exceptions to that rule - in particular for automatically generated data (like for example log file data) where every element in the row is of equal importance and nothing can really be considered a header.

In these instances, you could decide to dynamically set the header based on the sorting criteria but this is difficult to get to work across assistive technologies. If you were to do that, you would want to use ARIA grid markup with aria-labelledby to point to the headers. You should probably also test that solution for usability.

How to format table with additional column and row headers including vertical alignment and reactive inputs?

See related question and solution at this post, which presents an alternative (and ultimately better) solution to this question regarding descriptive column headers for to/from transition matrices: How to merge 2 row cells in data table?

Also here is code that works for that solution:

library(DT)
library(shiny)
library(dplyr)
library(htmltools)
library(data.table)

data <- 
  data.frame(
    ID = c(1,1,1,2,2,2,3,3,3),
    Period = c(1, 2, 3, 1, 2, 3, 1, 2, 3),
    Values = c(5, 10, 15, 0, 2, 4, 3, 6, 9),
    State = c("X0","X1","X2","X0","X2","X0", "X2","X1","X0")
  )

numTransit <- function(x, from=1, to=3){
  setDT(x)
  unique_state <- unique(x$State)
  all_states <- setDT(expand.grid(list(from_state = unique_state, to_state = unique_state)))
  dcast(x[, .(from_state = State[from], 
              to_state = State[to]), 
          by = ID]
        [,.N, c("from_state", "to_state")]
        [all_states,on = c("from_state", "to_state")], 
        to_state ~ from_state, value.var = "N"
  )
}

ui <- fluidPage(
  tags$head(tags$style(".datatables .display {margin-left: 0;}")), 
  h4(strong("Base data frame:")), 
  tableOutput("data"),
  h4(strong("Transition table inputs:")),
  numericInput("transFrom", "From period:", 1, min = 1, max = 3),
  numericInput("transTo", "To period:", 2, min = 1, max = 3),
  radioButtons("transposeDT",
               label = "From state along:",
               choiceNames = c('Columns','Rows'),
               choiceValues = c('Columns','Rows'),
               selected = 'Columns',
               inline = TRUE
               ),
  h4(strong("Output transition table:")), 
  DTOutput("resultsDT"),
)

server <- function(input, output, session) {
  results <- 
    reactive({
      results <- numTransit(data, input$transFrom, input$transTo) %>% 
        replace(is.na(.), 0) %>%
        bind_rows(summarise_all(., ~(if(is.numeric(.)) sum(.) else "Sum")))
      results <- cbind(results, Sum = rowSums(results[,-1]))
    })
 
  output$data <- renderTable(data)
  
  output$resultsDT <- renderDT(server=FALSE, {
    datatable(
      #StackPost solution from anuanand added the below...
      data = if(input$transposeDT=='Rows')
                {results()%>%transpose(make.names = 'to_state',keep.names = 'to_state')} 
             else {results()},
      rownames = FALSE,
      filter = 'none',
      container = tags$table(
        class = 'display',
        tags$thead(
          tags$tr(
            tags$th(rowspan = 2, # Add the below if-else to change to/from column headers when transposing
                    if(input$transposeDT=='Rows')
                      {sprintf('From state where initial period = %s', input$transFrom)}
                    else{sprintf('To state where end period = %s', input$transTo)}
                    , style = "border-right: solid 1px;"),
            tags$th(colspan = 10, # Add the below if-else to change to/from column headers when transposing
                    if(input$transposeDT=='Rows')
                      {sprintf('To state where end period = %s', input$transTo)}
                    else{sprintf('From state where initial period = %s', input$transFrom)}
                    )
          ),
          tags$tr(
            mapply(tags$th, colnames(results())[-1], style = sprintf("border-right: solid %spx;", rep(0, ncol(results()) - 1L)), SIMPLIFY = FALSE)
          )
        )
      ),
      options = list(scrollX = F
                     , dom = 'ft'
                     , lengthChange = T
                     , pagingType = "numbers"
                     , autoWidth = T
                     , info = FALSE 
                     , searching = FALSE
      ),
      class = "display"
    ) %>%
      formatStyle(c(1), `border-right` = "solid 1px")
  })
  
}

shinyApp(ui, server)

Related Topics