Spanning divs and spans -- HTML5, css and WCAG

Question

I have a three-column HTML presentation of courses using div and span. The goal at the end is to have a WCAG-compliant table, but I am stuck on a CSS issue...

Here is my code:

<div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION"><div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div>
<div role="rowgroup">
<div role="row">
<span role="columnheader">Course Number</span><span role="columnheader">Description</span><span role="columnheader">Prerequisite</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span class="semester" role="cell">Fa1l, 1st Year</span>
</div></div>
<div role="rowgroup">
<div role="row">
<span role="cell">BUSI3333</span><span role="cell">Business 3333</span><span role="cell">Business 3332</span>
</div>
</div>
</div>

How to I make the semester appear centered?

At the moment, my working CSS is:

.annotate {
  font-style: italic;
  color: #366ed4;
}
.semester {
    text-align: center;
    font-weight: bold;
    width: 100%;
}

[role="table"] {
  display: table;
}

[role="table"] > div[id] {
  display: table-caption;
  font-style: italic;
}

[role="table"] [role="row"] {
  display: table-row;
}

[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
  display: table-cell;
  padding: 0.125em 0.25em;
  width: 8em;
}

[role="table"] [role="columnheader"] {
  font-weight: bold;
  border-bottom: thin solid #888;
}

[role="table"] [role="rowgroup"]:nth-child(odd) {
  background-color: #ddd;
}
</style>

Yes, I could put the semester in the center span with empties on either side, but that seems wrong.

Answer 1

In this case, you should remove the row surrounding your semester span, and remove the role=cell declaration. Then it's just a plain old span in a row-group, and you can add display:inline-block to the semester CSS to center it. Like so:

.annotate {
  font-style: italic;
  color: #366ed4;
}
.semester {
  display:inline-block;
  text-align: center;
  font-weight: bold;
  width: 100%;
}

[role="table"] {
  display: table;
}

[role="table"] > div[id] {
  display: table-caption;
  font-style: italic;
}

[role="table"] [role="row"] {
  display: table-row;
}

[role="table"] [role="cell"],
[role="table"] [role="columnheader"] {
  display: table-cell;
  padding: 0.125em 0.25em;
  width: 8em;
}

[role="table"] [role="columnheader"] {
  font-weight: bold;
  border-bottom: thin solid #888;
}

[role="table"] [role="rowgroup"]:nth-child(odd) {
  background-color: #ddd;
}

<div role="table" aria-label="TABLE-NAME" aria-describedby="TABLE-NAME_DESCRIPTION"><div id="TABLE-NAME_DESCRIPTION">WCAG HTML, hopefully</div>
  <div role="rowgroup">
    <div role="row">
      <span role="columnheader">Course Number</span><span role="columnheader">Description</span><span role="columnheader">Prerequisite</span>
    </div>
  </div>
  <div role="rowgroup">
    <span class="semester">Fa1l, 1st Year</span>
  </div>
  <div role="rowgroup">
    <div role="row">
      <span role="cell">BUSI3333</span><span role="cell">Business 3333</span><span role="cell">Business 3332</span>
    </div>
  </div>
</div>