Styling and formatting DITA tables involve applying CSS (Cascading Style Sheets) or other formatting techniques to control the visual appearance of tables in documentation. This customization allows for adjusting table layout, fonts, colors, borders, and other visual aspects to align with the document’s style and branding.

Table styling can be controlled through CSS, table elements, and table attributes.

Using CSS: CSS is a common method for styling DITA tables. CSS rules can be defined to target specific table elements and apply formatting. For example, the font family, size, and color can be set for table text, cell padding and spacing adjusted, border styles defined, and background color changed. This level of control ensures that tables match the document’s visual identity.

Table Elements: Various table elements can be targeted with CSS. The <table> element itself, individual <td> (table cell) elements, <th> (table header cell) elements, <tr> (table row) elements, and <caption> elements can all be defined at various levels. This flexibility allows for fine-tuning the appearance of tables.

Table Attributes: Additionally, attributes and attribute sets can be used to apply styling. DITA’s specialization mechanism allows creating custom attributes to control formatting.

Example: A DITA table is being styled with CSS to have a custom appearance. A CSS class can be defined and applied to the table elements.

    
      <style>
        .custom-table {
          font-family: Arial, sans-serif;
          font-size: 14px;
          border-collapse: collapse;
          border: 1px solid #ccc;
          background-color: #f5f5f5;
        }
        .custom-table th, .custom-table td {
          border: 1px solid #ccc;
          padding: 8px;
          text-align: left;
        }
        .custom-table th {
          background-color: #333;
          color: #fff;
        }
      </style>
    
  

        <table class="custom-table">
          <tgroup cols="3">
            <thead>
              <row>
                <entry>Header 1</entry>
                <entry>Header 2</entry>
                <entry>Header 3</entry>
              </row>
            </thead>
            <tbody>
              <row>
                <entry>Data 1</entry>
                <entry>Data 2</entry>
                <entry>Data 3</entry>
              </row>
            </tbody>
          </tgroup>
        </table>
    

In this example, a custom CSS class, “custom-table,” is applied to the table element and its cells to adjust fonts, borders, padding, and background colors, providing a tailored appearance for the DITA table.