How do HTML table attributes affect data presentation?

3 Table borders

One of the most common HTML table attributes is the border attribute, which specifies the width of the border around the table and its cells. The border attribute can take a numeric value from 0 to 9, where 0 means no border and 9 means the thickest border. For example, if you want to add a 1-pixel border to your table, you can use the following code:

<table border="1">
  <!-- table content -->
</table>        

However, the border attribute only applies a solid black border to your table, which may not suit your design preferences. To customize the color, style, and width of your table borders, use CSS instead. For example, you can use the border property to set the border for the whole table, and the border-collapse property to remove the space between the cells. You can also use the border-spacing property to control the distance between the cells, and the border-style property to choose from different border styles, such as dotted, dashed, or double. For example, this is how you can create a dashed blue border with 2 pixels of spacing between the cells:

<style>
  table {
    border: 2px dashed blue;
    border-collapse: separate;
    border-spacing: 2px;
  }
</style>
<table>
  <!-- table content -->
</table>        

4 Table alignment

Another common HTML table attribute is the align attribute, which specifies the horizontal alignment of the table and its cells. The align attribute can take one of the following values: left, center, right, or justify. For example, if you want to center your table on the page, you can use the following code:

<table align="center">
  <!-- table content -->
</table>        

However, the align attribute is not supported by HTML5 and may not work on some browsers. To align your table and its cells using CSS, use the text-align property for the horizontal alignment, and the vertical-align property for the vertical alignment. The text-align property can take the same values as the align attribute, plus inherit and start. The vertical-align property can take one of the following values: top, middle, bottom, baseline, sub, super, text-top, text-bottom, or a percentage or length value. For example, this is how you can align your table cells to the middle horizontally and vertically:

<style>
  td {
    text-align: center;
    vertical-align: middle;
  }
</style>
<table>
  <!-- table content -->
</table>        

5 Table spanning

Another useful HTML table attribute is the colspan attribute, which allows you to merge two or more cells horizontally. Similarly, the rowspan attribute allows you to merge two or more cells vertically. The colspan and rowspan attributes can take a numeric value that indicates the number of cells to span. For example, if you want to create a table with a title cell that spans across three columns, you can use the following code:

<table>
  <tr>
    <td colspan="3">Table Title</td>
  </tr>
  <!-- rest of table content -->
</table>        

Using the colspan and rowspan attributes, you can create complex and dynamic table layouts that can accommodate different types of data and content. However, be careful not to create overlapping or missing cells, as this can cause confusion and accessibility issues. To avoid these problems, always use the scope attribute to define the relationship between the header cells and the data cells. The scope attribute can take one of the following values: col, colgroup, row, rowgroup, or auto. For example, this is how you can use the scope attribute to indicate that the first cell in each row is a row header, and the first cell in each column is a column header:

<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Gender</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>25</td>
    <td>F</td>
  </tr>
  <tr>
    <th scope="row">Bob</th>
    <td>30</td>
    <td>M</td>
  </tr>
  <tr>
    <th scope="row">Charlie</th>
    <td>28</td>
    <td>M</td>
  </tr>
</table>        

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?