HTML Tables

HTML stands for HyperText Markup Language, the language used to describe the structure of a web page. A table is the HTML structure that arranges information in rows (going across) and columns (going down). The box where a row and a column meet is called a cell, and a cell is the smallest unit of a table — every piece of data you display sits inside one.

Before you write a single tag, ask one question: is this data naturally tabular? Data is tabular when each row describes one record and each column describes one property that every record shares. If that is true, a reader can do two useful things: read across a row to see one complete record, and read down a column to compare the same property for many records. If neither reading makes sense, the data is not tabular and a table is the wrong tool.

Good candidates from everyday Indian school and web use include a class timetable (rows are periods, columns are days), a marks sheet (rows are students, columns are subjects), a fee structure in rupees (rows are classes, columns are terms), a train departure list on the IRCTC — Indian Railway Catering and Tourism Corporation — website (rows are trains, columns are number, name, departure and arrival), or a price list on a shopping site. In each case a column heading such as Marks or Fee (₹) applies to every value beneath it.

Poor candidates are equally easy to recognise. A block of continuous writing belongs in a <p> element. A set of navigation links or a simple list of points belongs in <ul> or <ol>. A single photograph with a line of text beneath it is not tabular at all.

There is one historical use you should know about because older books and older pages still show it. In the early years of the web, designers used tables to lay out the whole page — one cell for the banner, one for a side menu, one for the main content. This worked, but it made the code long and hard to change, and the markup no longer described what the data meant. Modern practice is to place data in tables and to control the arrangement and appearance of the page with CSS (Cascading Style Sheets), a separate language for presentation. Your syllabus still requires you to know the presentation attributes covered later in this chapter, so learn them for the paper — but state, when the question invites it, that CSS is the preferred modern method.

A last point of vocabulary that examiners like. The word row always means a horizontal line of cells and is created by one <tr> element. A column is vertical, and there is no column tag in the basic syllabus — columns are formed automatically because every row contributes one cell to each column position. This is why a table looks correct only when every row supplies the same number of column positions, a rule you will meet again when you study colspan and rowspan.

Four elements build every HTML table, and all four are container (paired) tags — each needs an opening tag and a closing tag.

The <table> element is the outermost container; everything belonging to the table is written between <table> and </table>. Inside it, <tr> (table row) creates one horizontal row. Inside a row, cells are written: <th> (table heading) for a heading cell and <td> (table data) for an ordinary data cell. Note the strict nesting order — cells go inside rows, and rows go inside the table. A <td> written directly inside <table> without a surrounding <tr> is invalid markup.

Here is a complete, working table you can copy.

<table border="1">
  <caption>Class 10 A — Term 1 Marks</caption>
  <tr>
    <th>Roll No</th>
    <th>Student Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>01</td>
    <td>Ananya Sharma</td>
    <td>89</td>
  </tr>
  <tr>
    <td>02</td>
    <td>Rohit Verma</td>
    <td>81</td>
  </tr>
</table>

Read it as a machine would. The browser meets <table> and starts a table. It meets three <tr> elements, so the table has three rows. Each row contains three cells, so the table has three columns. The result is a 3 × 3 grid with a title above it.

The th versus td distinction is one you must be able to state precisely. Both create a cell, and both are written inside a <tr>. The difference is meaning, and appearance follows from meaning: <th> marks a cell as a heading for the row or column it introduces, while <td> marks a cell as ordinary data. By default browsers render <th> text in bold and horizontally centred, and <td> text in normal weight, left-aligned. Those defaults come from the browser's own style rules, so the exact shade of boldness or spacing can differ slightly between browsers; the bold-and-centred behaviour itself is what your textbook states and what an examiner expects. The important part of a full-mark answer is that <th> conveys that the cell is a header — the bold appearance is a consequence, not the definition.

Heading cells are not restricted to the first row. A table can have row headings too, placed as the first cell of each row.

<tr>
  <th>Monday</th>
  <td>Maths</td>
  <td>Science</td>
</tr>

The <caption> element supplies a title for the whole table. Two rules matter. First, it must be written immediately after the opening <table> tag, before any <tr>. Second, a table may have only one caption. Browsers normally display the caption centred above the table. A caption is not the same as a heading cell: the caption names the table as a whole ("Term 1 Marks"), whereas a <th> names one row or one column ("Marks").

An attribute is extra information written inside an opening tag as name="value". The attributes below are the ones the CBSE syllabus presents for tables. Write the value in double quotes; leaving the quotes out is a common careless mistake.

border is written on <table> and gives the thickness of the table's border in pixels. border="1" draws a thin line around the table and around every cell. border="0" — or omitting the attribute altogether — draws no visible border, which is why a table you have just written can appear as loose text on the screen. Increasing the number thickens the outer frame.

cellpadding is written on <table> and sets the space in pixels between the content of a cell and that cell's own border — the breathing room inside a cell. With cellpadding="0" text touches the cell edge and looks cramped.

cellspacing is also written on <table> and sets the space in pixels between adjacent cells — the gap outside the cells, between one cell's border and the next. This pair is the classic distinction to keep straight: padding is inside a cell, spacing is between cells. Setting cellspacing="0" makes the borders of neighbouring cells sit together as a single line.

width may be written on <table>, on <th> or on <td>. It takes either a number of pixels, as in width="600", or a percentage of the available space, as in width="80%". A percentage width lets the table grow and shrink with the browser window, which is usually the friendlier choice.

align behaves differently depending on where it is written, and examiners exploit that. On <table>, align positions the whole table on the page — left, center or right. On <tr>, <th> or <td>, it sets the horizontal alignment of the text inside those cells. So <td align="right"> pushes a rupee amount to the right edge of its cell, which is how number columns are normally set.

bgcolor sets a background colour. It may be written on <table> for the whole table, on <tr> for one row, or on <th>/<td> for a single cell. The value is a colour name such as "yellow" or a hexadecimal code such as "#f0f0f0". A value written on a cell overrides one written on its row, which in turn overrides one written on the table — the more specific setting wins.

Here they are together in one table.

<table border="1" cellpadding="8" cellspacing="2"
       width="80%" align="center" bgcolor="#f0f0f0">
  <caption>Annual Fee Structure</caption>
  <tr bgcolor="#cfe8e4">
    <th>Class</th>
    <th>Fee (Rs.)</th>
  </tr>
  <tr>
    <td>Class 9</td>
    <td align="right">18000</td>
  </tr>
  <tr>
    <td>Class 10</td>
    <td align="right">22000</td>
  </tr>
</table>

One honest note to carry into any long answer. These six attributes are presentation attributes: they describe appearance, not meaning. Current professional practice is to leave the HTML describing the data and to set borders, padding, spacing, width, alignment and colour in CSS instead, because one CSS rule can style every table on a site and can be changed in one place. Support for the older attributes also varies — some browsers ignore or partially honour a few of them, so appearance can differ between browsers. Write the attributes when the question asks for them, and add the CSS remark when the question asks you to comment on modern practice.

Real tables are rarely a plain grid. A marks sheet needs one wide heading sitting over two narrow ones; a fee table needs a class name standing beside two term rows. Two attributes do this, and both are written on a cell — on <th> or on <td>, never on <tr> or <table>.

colspan="n" makes one cell occupy n column positions in its own row — it stretches sideways. rowspan="n" makes one cell occupy n row positions in its own column — it stretches downwards. The default value of each is 1, which is why an ordinary cell fills exactly one position.

The rule students most often miss is what happens to the positions that a merged cell swallows. Every position covered by a span must be removed from the markup. If a cell in row 1 has rowspan="2", then row 2 must not write a cell for that column — the merged cell is already occupying it. Writing one anyway pushes the rest of the row sideways and the table comes out crooked.

From this follows the counting rule an examiner applies when marking your code:

For every row: (sum of the colspan values of the cells written in that row) + (number of positions occupied by rowspans coming down from rows above) = the total number of columns in the table.

Now the fully worked example. Copy it, run it, and check it against the rule.

<table border="1" cellpadding="6" cellspacing="0">
  <caption>Half-Yearly Result — Class 10 A</caption>

  <tr>
    <th rowspan="2">Roll No</th>
    <th rowspan="2">Student Name</th>
    <th colspan="2">Marks Obtained</th>
  </tr>

  <tr>
    <th>Theory</th>
    <th>Practical</th>
  </tr>

  <tr>
    <td>01</td>
    <td>Ananya Sharma</td>
    <td align="right">61</td>
    <td align="right">28</td>
  </tr>

  <tr>
    <td>02</td>
    <td>Rohit Verma</td>
    <td align="right">55</td>
    <td align="right">26</td>
  </tr>

  <tr>
    <td colspan="2">Class average</td>
    <td align="right">58</td>
    <td align="right">27</td>
  </tr>
</table>

The table has four columns. Verify each row.

• Row 1 — Roll No has rowspan 2 (1 column), Student Name has rowspan 2 (1 column), Marks Obtained has colspan 2 (2 columns). Total 1 + 1 + 2 = 4. Correct.
• Row 2 — only two cells are written, Theory and Practical. The first two columns are already occupied by the two rowspans from row 1. So 2 written + 2 inherited = 4. Correct, and this is exactly the row where students wrongly re-write Roll No.
• Rows 3 and 4 — four ordinary cells each. 4 = 4. Correct.
• Row 5 — one cell with colspan 2 covering the Roll No and Student Name positions, then two ordinary cells holding the two column averages. 2 + 1 + 1 = 4. Correct. The figures check out: theory (61 + 55) ÷ 2 = 58, practical (28 + 26) ÷ 2 = 27. Span only the label columns — had the label been given colspan 3 it would have swallowed the Theory column, and the one remaining figure would have been printed under the Practical heading, which would say something the table does not mean.

Notice how the two attributes combine to produce a two-level heading: Marks Obtained spans two columns across the top, and beneath it the two sub-headings sit in their own row, while Roll No and Student Name — which have no sub-headings — reach down through both heading rows so the header block stays rectangular.

A small check you can do in the exam without a computer: draw the finished grid on your rough sheet as a set of empty boxes, shade the boxes each merged cell covers, and then read your shading back as rows. Any row whose shaded and written boxes do not add up to the column total tells you the error before you lose the mark.

A long table reads better if its rows are grouped by purpose. HTML provides three row-group elements, each of which contains whole <tr> rows — never bare cells.

• <thead> — the header group, holding the row or rows of column headings.
• <tbody> — the body group, holding the main data rows.
• <tfoot> — the footer group, holding summary rows such as a total.

Here is a table using all three.

<table border="1" cellpadding="6">
  <caption>Library Fine Collected</caption>

  <thead>
    <tr>
      <th>Month</th>
      <th>Amount (Rs.)</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>June</td>
      <td align="right">450</td>
    </tr>
    <tr>
      <td>July</td>
      <td align="right">380</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Total</th>
      <th align="right">830</th>
    </tr>
  </tfoot>
</table>

Two points about these groups are worth stating in an answer. First, they are optional — a table without them is perfectly valid, and if you omit them the browser treats the rows as one implicit body. Second, they add no visible change by themselves; their purpose is to label the meaning of each block of rows so that a style sheet can target it, and so that software reading the page can tell a heading row from a data row. Some browsers can also keep a <thead> visible or repeat it when a long table is printed across several pages, but this behaviour is not identical everywhere, so describe it as something browsers may do rather than as a guarantee.

A detail that surprises students: older textbooks often show <tfoot> written before <tbody>, because an earlier version of HTML asked for that order. Current HTML expects the natural order — <thead>, then <tbody>, then <tfoot> — as shown above. Browsers display the footer rows at the bottom of the table in either case, but write it last: that is both the natural reading order and what current HTML expects.

Nesting a table means placing a complete table inside a cell of another table. The inner table must sit inside a <td> or a <th> — it can never be written loose inside a <tr> or directly inside the outer <table>. The inner table is a full table in its own right, with its own opening and closing tags and its own attributes.

<table border="1" cellpadding="6">
  <tr>
    <th>Class</th>
    <th>Subjects Offered</th>
  </tr>
  <tr>
    <td>Class 10</td>
    <td>
      <table border="1" cellpadding="3">
        <tr>
          <td>Science</td>
          <td>Mathematics</td>
        </tr>
        <tr>
          <td>Social Science</td>
          <td>Computer Applications</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

The outer table has two columns and two rows. The second cell of the second row contains a whole 2 × 2 table. Because the inner table is closed before its enclosing </td>, the nesting is correct.

Nesting is legal but should be used sparingly. Deeply nested tables become very hard to read and to correct, and in most cases the same result can be achieved more simply with colspan and rowspan in a single table. If a question asks you to compare the two, say that colspan and rowspan merge cells within one table structure, while nesting places an independent table inside a cell — and that the merged single table is usually preferred.

Table questions are marked on code that would actually work. The errors below are the ones that appear again and again; learn to spot each in your own answer before you move on.

1. An unclosed <td> or <tr>. Every cell and every row is a container tag and needs its closing tag. If you write <td>Ananya and then start the next cell, the browser has to guess where the first cell ended. Browsers do try to recover, but they do not all recover in the same way — the cell may swallow the next one's text, or the row may collapse. Because the recovery differs, the same page can look different in different browsers, which is exactly why an examiner marks it wrong even if it happens to render on one machine.

2. A colspan count that does not match the column total. If the table has 4 columns and you write <td colspan="3"> followed by two more cells, that row claims 5 positions. The browser will usually widen the whole table to 5 columns, leaving every other row one cell short and the grid ragged. The fix is the counting rule from the previous section — check every row.

3. Forgetting to remove the cells a rowspan covers. After <td rowspan="2">Class 10</td>, the next row must not write a cell for that column. Rewriting it shunts the rest of that row one position to the right.

4. Writing a cell outside a row. A <td> placed directly inside <table>, with no <tr> around it, is invalid; so is a <tr> placed inside a <td> without a fresh <table> around it.

5. A caption in the wrong position, or more than one. The <caption> belongs immediately after the opening <table> tag and there may be only one per table.

6. Missing quotes or a stray attribute. Write border="1", not border=1. Also remember which element each attribute belongs to — cellpadding and cellspacing go on <table>, while colspan and rowspan go on a cell.

7. Confusing padding with spacing. Padding is the space inside a cell; spacing is the gap between cells. Say which is which explicitly rather than describing both as "gap".

8. Using <td> where a heading is meant. If a cell names a column, it should be <th>. Making a <td> look bold by other means does not make it a heading.

What a full-mark answer contains. When you are asked to write the HTML code to produce the given table, an answer that scores fully normally shows all of the following: the complete <table> element with its opening and closing tags; the border attribute so the table is visible; a <caption> if the picture shows a title; <th> for every cell that acts as a heading and <td> for the data; correctly counted colspan and rowspan values with the covered cells omitted; every tag closed; attribute values in double quotes; and neat indentation so the structure can be read. If the question also asks you to comment on styling, add the sentence that these presentation attributes are part of older HTML practice and that CSS is now used for borders, spacing, width, alignment and colour.

When the question is a definition or a difference, name the element by its full expansion once — <tr> is table row, <th> is table heading, <td> is table data — then give the distinguishing property, then a one-line example. Definition, distinction, example: three short parts, and the mark is secure.