HTML Tables

Table of Contents

Announcements

• Review due dates (lab and quiz).
• Are there any questions on lab 5?
• How is the term project coming?

Introduction

• What is a table--in general?
• Where are tables commonly used?

Structure of a Table

Tables are constructed using multiple elements (which means multiple tags). A table with two rows and three columns would be written in HTML like this:

<table>
    <tr>   <!-- tr = table row, this is the beginning of a row -->
        <td>row 1, column 1</td>    <!-- td = table data, this is a cell -->
        <td>row 1, column 2</td>
        <td>row 1, column 3</td>
    </tr>
    <tr>
        <td>row 2, column 1</td> 
        <td>row 2, column 2</td> 
        <td>row 2, column 3</td>
    </tr>
</table>

The table will be rendered in a browser like this:

Borders

Borders can be added using CSS. For example:

table, td {
  border: solid;
  border-collapse: collapse;
}

The table will be rendered like this:

Headings

A special type of table cell is a heading, . The following code can be placed above row 1 and provides headings for the columns:

<tr>
   <th>column 1</th> <th>column 2</th> <th>column 3</th>
</tr>

The table will be rendered like this:

Row and Column Spans

The rowspan attribute is used to make a <td> element stretch across two rows.

The colspan attribute is used to make a <td> element stretch across two columns.

<tr>                           
  <td colspan="2">row 1, columns 1 and 2</td>   
  <td rowspan="2">rows 1 and 2, column 3</td>
</tr>
<tr>
   <td>row 2, column 1</td>
    <td>row 2, column 2</td>
</tr>

The table will be rendered like this:

Captions

  <caption>Table Example</caption>

Captions can be positioned using CSS. For example:

caption {
  caption-side:bottom;
}

ASP.NET Core MVC Lecture Notes by Brian Bird is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.