How to create tables for Websites?

 How to create tables for Websites?

How to create tables for Websites?

There are many types of information that we need to be displayed in a grid or
table. For instance: 

  • sports results
  • stock reports
  • train timetables

We need to think in terms of a grid made up of rows and columns (a bit like a spreadsheet) when representing information in a table.

What’s a Table?

The information in a grid format is being represented as a Table. There are several examples of tables comprising financial reports, TV schedules, and sports results. Grids permit us to understand complex data by referencing information on two axes. Every block in the grid is referred to as a table cell. A table is written out row by row in HTML.

Basic Table Structure

 <table>
The <table> element is used to create a table. The table contents are written out row by row.
<tr> 

We indicate the start of each row using the opening <tr> tag. The tr stands for table row. This is followed by one or more <td> elements (one for each cell in that row). We use a closing </tr> tag at the end of the row.
<td>

Using a <td> element, each cell of a table is represented . (The td stands for table data.) At the end of each cell we use a closing </td> tag. 

HTML

<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>

Result

15 15 30

45 60 45

60 90 90

Table Heading

<th>
The <th> element is used just like the <td> element. Its aim is to represent the heading for either a column or a row. The th stands for table heading. Even if a cell has no content, we should still use a <td> or <th> element to represent the presence of an empty cell otherwise the table will not render correctly. (The first cell in the first row of this example shows an empty cell.) Using <th> elements for headings helps people who use screen readers, improves the ability for search engines to index the pages. It also enables us to control the appearance of tables better when we start to use CSS. We may use the scope attribute on the <th> element to indicate whether it is a heading for a
column or a row. It may take the values: row to indicate a heading for a row or col to indicate a heading for a column.

HTML

<table>
<tr>
<th></th>
<th scope=”col”>Saturday</th>
<th scope=”col”>Sunday</th>
</tr>
<tr>
<th scope=”row”>Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope=”row”>Total sales:</th>
<td>$600</td>
<td>$675</td>
</tr>
</table>

Result

                        Saturday   Sunday

Ticket sold:      120            135

Total sales:      $600           $675

Spanning Columns

We may sometimes need the entries in a table to stretch across more than one column. The colspan attribute might be used on a <th> or <td> element. It indicates how many columns that cell should run across. In the example below we can see a timetable with five columns; the first column contains the heading for that row (the day), the remaining four represent one hour time slots. If we look at the table cell that contains the words ‘Geography’ we will see that the value of the colspan attribute is 2 , which indicates that the cell should run across two columns. The ‘Gym’ runs across three columns in the third row. We can see that the second and third rows have fewer <td> elements than there are columns. This is due to when a cell extends across more than one column, the <td> or <th> cells that would have been in the place of the wider cells are not included in the code.

 HTML

<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan=”2″>Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan=”3″>Gym</td>
<td>Home Ec</td>
</tr>
</table>

Result

                 How to create tables for websites? 

 Spanning Rows

We can also need entries in a table to stretch down across more than one row.
The rowspan attribute might be used on a <th> or <td> element to indicate how many rows a cell should span down the table. We may understand that ABC is showing a movie from 6pm – 8pm, whereas the BBC and CNN channels are both showing two programs. During this time period (each of which lasts one hour) in the example below. It only contains three elements even though there are four columns in the result below, if we look at the last <tr> element. This is due to the movie in the <tr> element above it uses the rowspan attribute to stretch down and take over the cell below.

HTML

 <table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm – 7pm</th>
<td rowspan=”2″>Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm – 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>

Result

             How to create tables for websites?

Leave a Comment