This page documents some potential new ways to make the meta template/module Template:Infobox. It's a sketch to work out what the template should output at the end of the day.

Alternatives

Con of current: The majority of the parameters you put in (aside from the label/data parameters) are not tabular. Note "full data cells" are also not tabular but usually contain only child infoboxes. And even the label/data parameters are not particularly tabular (i.e. could be represented as key-value pairs i.e. with an HTML description list).

Con of current: We have to go through pain and misery to embed child infoboxes. Or at least, the kind that have the same column boundaries as the parent template, which in general have to assume the parent structure in some way. Either way will need to care about this during some future conversion. We'd also like to avoid the style element associated with the child infobox's TemplateStyles from showing up in some weird location due to the HTML 5 fostering algorithm. (Do we want the 'embedded' version to output the same styles as the parent infobox or as the embedded infobox???)

Con of alternatives: Labels/data no longer are nicely columnar without explicit CSS? Maybe not even then? We could set display to table-cell but then we have to wrap each 'row' in a div or something, which might work with a pure-div solution or a mixed table solution but not with a description list.

Con of alternatives: Auto headers have to be turned on everywhere? (That's a good thing in the general but requires care in implementation...)

Con? of alternatives: Graham's comments about liking being able to browse to each th. The other infoboxes in the world use divs, so not sure how useful this seems. Could add roles to each div for lists which would adjust the below div versions a bit.

Whole table (current)

<table class="infobox">
  <caption class="infobox-title">(({title))}</caption>
  <tr><td class="infobox-above" colspan="2">(({above))}</td></tr>
  <tr><td class="infobox-subheader" colspan="2">(({subheader))}</td></tr>
  <tr><td class="infobox-image" colspan="2">(({image))}</td></tr>
  <tr><td class="infobox-caption" colspan="2">(({caption))}</td></tr>
  <tr><td class="infobox-header" colspan="2">(({header))}</td></tr>
  <tr>
    <th class="infobox-label">(({label))}</th>
    <td class="infobox-data">(({data))}</td>
  </tr>
  <tr>
    <td class="infobox-data-full" colspan="2">(({data2))}</td>
  </tr>
  ... repeat for N rows
  <tr>
    <td class="infobox-below" colspan="2">(({below))}</td>
  </tr>
</table>

Inner tables

<div class="infobox">
  <div class="infobox-title">(({title))}</div>
  <div class="infobox-inner">
    <div class="infobox-above">(({above))}</div>
    <div class="infobox-subheader">(({subheader))}</div>
    <div class="infobox-image">(({image))}</div>
    <div class="infobox-caption">(({caption))}</div>
    <table class="infobox-table">
      <caption class="infobox-header">(({header))}</caption>
      <tr>
        <th class="infobox-label">(({label))}</th>
        <td class="infobox-data">(({data))}</td>
      </tr>
      <tr>
        <td class="infobox-data-full" colspan="2">(({data2))}</td>
      </tr>
    </table>
    ... repeat for N headers
    <div class="infobox-below">(({below))}</div>
  </div>
</div>

Description list

<div class="infobox">
  <div class="infobox-title">(({title))}</div>
  <div class="infobox-inner">
    <div class="infobox-above">(({above))}</div>
    <div class="infobox-subheader">(({subheader))}</div>
    <div class="infobox-image">(({image))}</div>
    <div class="infobox-caption">(({caption))}</div>
    <div class="infobox-header">(({header))}</div>
    <dl>
      <dt class="infobox-label">(({label))}</dt>
      <dd class="infobox-data">(({data))}</dd>
      ... repeat
    </dl>
    ... repeat
    <div class="infobox-data-full">(({data2))}</div>
    <div class="infobox-below">(({below))}</div>
  </div>
</div>

"Basic" div "tables"

This could be done with infobox-rows set to display: grid I think. User:Izno/Sandbox/Infobox/template and User:Izno/Sandbox/Infobox/template/styles.css

<div class="infobox">
  <div class="infobox-title">(({title))}</div>
  <div class="infobox-inner">
    <div class="infobox-above">(({above))}</div>
    <div class="infobox-subheader">(({subheader))}</div>
    <div class="infobox-image">(({image))}
      <div class="infobox-caption">(({caption))}</div>
    </div>
    <div class="infobox-header">(({header))}</div>
    <div class="infobox-label">(({label))}</div>
    <div class="infobox-data">(({data))}</div>
    <div class="infobox-data-full">(({data2))}</div>
    <div class="infobox-below">(({below))}</div>
    <div class="infobox-navbar">((navbar|User:Izno/Sandbox/Infobox))</div>
  </div>
</div>

Migration tracking

Some comments about migrations.

When we do migrate, we need to fix some infoboxes that assume they are tables in their CSS i.e. those that were .bordered and .geography before their TemplateStyling in MediaWiki talk:Common.css/to do#Bordered and MediaWiki talk:Common.css/to do#Geography. The list is replicated here (a decent backup might be this or this):

There are also some templates that are not directly derived from the infobox template that assume its structure is tabular, like listed at Module talk:Sidebar/Archive 5#Make tables into divs instead.