The appearance of DITA tables in HTML is determined by the CSS (Cascading Style Sheets) applied to the HTML content, which defines the visual styling.

DITA tables are rendered as standard HTML <table> elements, maintaining a structured format with rows and columns. The HTML <thead>, <tbody>, and <tfoot> elements are used to group rows, and <th> elements are used for headers in both rows and columns.

The visual appearance of DITA tables is controlled by CSS styles. The CSS can define the table’s border, cell padding, text alignment, background colors, and fonts, among other visual attributes.

Tables in HTML output generated from DITA can adapt to different screen sizes and devices through responsive design techniques. This ensures that tables remain readable and functional on both desktop and mobile devices.

DITA tables in HTML output should adhere to accessibility best practices. Screen readers and assistive technologies can interpret the table structure, headers, and alternative text, providing a meaningful reading experience for users with disabilities.

Example

    <table>
      <caption>Monthly Sales Report</caption>
      <colgroup>
        <col span="1" style="width: 1*;"></col>
        <col span="1" style="width: 1*;"></col>
        <col span="1" style="width: 1*;"></col>
      </colgroup>
      <tbody>
        <tr>
          <th scope="row" rowspan="2" colspan="1">Product</th>
          <th scope="col" rowspan="1" colspan="1">January</th>
          <th scope="col" rowspan="1" colspan="1">February</th>
        </tr>
        <tr>
          <td headers="col1 row2">1001</td>
          <td headers="col2 row2">350</td>
          <td headers="col3 row2">420</td>
        </tr>
      </tbody>
    </table>
  

The appearance of this table in HTML will depend on the CSS styles applied. The HTML output will typically include borders around cells, headers in bold, and column widths according to the defined percentages. This is the structured representation, and the visual details may vary depending on the specific CSS used in the HTML output. Accessibility features, such as

elements and alternative text, should be present in the HTML output to ensure compatibility with screen readers and assistive technologies.