Jump to main content
Menu

Complex Tables

Spanning Columns

  • Spanning refers to joining together cells in a table to create a single larger cell.
  • To span columns in a table, there is a colspan attribute that can be specified in either <th></th> or <td></td>.
  • The value assigned to the colspan attribute is a number that represents the number of cells being joined together.
    • By default a cell has a colspan value of 1 (this is never specified in the code), so when you determine the number of cells to join together you always include the current cell.
  • To ensure that columns are the desired width, assign each individual column its width. Do not rely on assigning widths to colspanned cells only, since the browser is then given the choice of what widths to assign to each of the colspanned columns in other rows where those columns are not merged together.
  • Important:
    • Whatever cells are spanned together never have their separate <th></th> or <td></td> tags specified in the code. The colspan attribute takes care of that.
    • If you should accidentally put in those cells, they will render as odd-looking orphaned cells to the right edge of the table (because that row would have more cells than it could handle).
  • One helpful strategy when working with colspan is to know ahead of time how many cells are in a row. Then you can just count up the cells in each row to make sure they all reach the proper number.

Colspan Example

See the Pen Colspan by Jason Withrow (@jwithrow) on CodePen.

Spanning Rows

  • Spanning of rows uses the rowspan attribute, which is assigned to either <th></th> or <td></td>.
  • Each cell automatically has a default rowspan of 1, so that is never specified.
  • The rowspan attribute is more complicated than colspan because now you are merging together cells that are in the same column, yet exist in different rows.
  • The colspan and rowspan attributes can also be used together to create a large cell that merges together cells both horizontally and vertically.
  • Important: Just as with colspan, whatever cells are spanned together with rowspan never have their separate <th></th> or <td></td> tags specified. If they are specified, the extra cells will appear to the right side of the table.

Rowspan Example

See the Pen Rowspan by Jason Withrow (@jwithrow) on CodePen.

Colspan and Rowspan Example

See the Pen Colspan and Rowspan by Jason Withrow (@jwithrow) on CodePen.

Using Graphics in Layouts

  • Any space around the <img /> tag can create visual gaps, due to the inline nature of the tag.
  • Inline-displayed elements will respond to line-height styling and will accept at most one space to either side. Breaking to a new line in the code counts as a space (due to the newline character).
    • One solution to these gaps is to tighten up the code by removing all white space and line breaks between the tags.
    • Another option is display the images as block, using the CSS display property
  • Specify height and width attributes for images (or use the corresponding CSS attributes) to speed up rendering.
  • Specify border="0" (if the image is linked) so no blue borders appear around the image. Or use CSS to disable the borders and remove the deprecated border attribute.
  • When deciding on what alt attribute text to assign, keep in mind that alt is a replacement for the image. Try to use the text (if any) shown in the image for its alt attribute.

Recommendations When Coding Tables

  • Indenting: Be sure to indent your code, as shown in the examples. This will make troubleshooting any coding issues much easier.
  • Sketching / Planning: Before you write any code, sketch on a piece of paper the layout of the table, so that you know ahead of time how many rows and cells you need.
  • Closure: Always be sure to close your tags, especially the final </table> tag. If this is not closed, expect rendering glitches.
  • Accounting for Cells: Once you create a cell, that cell will need to be accounted for in all the subsequent rows of the table. So if you have three sets of <td></td> tags in a <tr></tr>, if you add another <tr></tr> you will need to have those three sets of <td></td> tags incorporated.
  • Multiple Tables and Performance: Splitting up content into multiple separate tables speeds up rendering, because content will appear as soon as its table is completely read.
  • Correct Addition and Table / Cell Width Arrangements:
    • Make sure that the combined widths for your <th> and <td> tags add up to the same width specified in your <table> tag, if you are using fixed sizes (such as pixels) at both levels.
    • If you are using percentages for the <th> and <td> widths, those widths should equal 100%.
    • It is fine to have a fixed-width table that has variable-width cells totaling 100%, but the opposite setup (variable-width table, fixed-width cells) is to be avoided because the fixed-width cells will rarely add up to the variable width of the table, since the table width is continually changing as the window is resized.
  • Troubleshooting: When troubleshooting tables, turn on the borders and specify background colors, so you can see what is happening with the rows and cells.
  • Empty Cells: Unless CSS is being used to keep cell borders shown, an empty table cell may "collapse" and its border will disappear.

    To "hold open" that otherwise empty cell (and keep its border shown) put a non-breaking space (&nbsp;) between the <th></th> or <td></td> tags.

  • Jettisoned Content: If content that is supposed to be inside a table is rendered below the table, that's a clear sign that the content was not inside a cell, and therefore it was ejected from the table. Validate your code to determine where the issue is occurring.