📊 HTML

Tables & Multimedia

⏱ 2 hr3 topicsInteractive

🎯 By the end: You can lay out data in an HTML table, merge cells across rows/columns, and embed audio and video files.

Tables arrange data in rows and columns, and the <audio>/<video> tags let a page play media. Both are on the CBSE 165 syllabus.

1Building a table

A table is built from four tags:

Tag	Meaning
`<table>`	The whole table
`<tr>`	A table row
`<th>`	A header cell (bold & centred)
`<td>`	A normal data cell

<table border="1">
  <tr><th>Name</th><th>Marks</th></tr>
  <tr><td>Asha</td><td>92</td></tr>
</table>

Rows go top-to-bottom (<tr>); inside each row the cells go left-to-right (<th>/<td>). The border attribute draws the gridlines.

Table playground▶ live preview

index.html

<table border="1" cellpadding="6">
  <tr><th>Name</th><th>Class</th><th>Marks</th></tr>
  <tr><td>Asha</td><td>10A</td><td>92</td></tr>
  <tr><td>Ravi</td><td>10B</td><td>78</td></tr>
</table>

Preview

Key points

<table> holds the table; <tr> is a row; <th> a header cell; <td> a data cell.
Cells are written inside rows, left to right.
The border attribute draws the table's gridlines.

2Merging cells: rowspan & colspan

Sometimes one cell should cover several rows or columns:

colspan="n" — the cell stretches across n columns (horizontally).
rowspan="n" — the cell stretches down n rows (vertically).

<tr><th colspan="2">Student Report</th></tr>
<tr><td rowspan="2">Term 1</td><td>Maths</td></tr>
<tr><td>Science</td></tr>

Remember: colspan widens across columns; rowspan deepens across rows. When a cell spans, the cells it covers are not written again.

Span playground▶ live preview

index.html

<table border="1" cellpadding="6">
  <tr><th colspan="2">Report Card</th></tr>
  <tr><td rowspan="2">Term 1</td><td>Maths: 92</td></tr>
  <tr><td>Science: 88</td></tr>
</table>

Preview

Key points

colspan="n" makes a cell span n columns (horizontally).
rowspan="n" makes a cell span n rows (vertically).
Cells covered by a span are not written separately.

3Embedding audio and video

HTML can play media directly with the <audio> and <video> tags. Add controls so the user gets play/pause buttons:

<audio src="song.mp3" controls></audio>

<video src="clip.mp4" width="320" height="180" controls>
</video>

Attribute	Effect
`src`	The media file to play
`controls`	Shows play/pause/volume controls
`width` / `height`	Size of the video box

Common audio formats: MP3, OGG, WAV. Common video formats: MP4, WEBM, OGG. Always include controls so visitors can play the media.

Key points

<audio> plays sound and <video> plays video; both take a src attribute.
Add the controls attribute to show play/pause/volume buttons.
<video> also takes width and height for its box size.

★ Practical: a report-card table

Create one page that has:

A table with a header row (<th>) and at least two data rows.
A title cell that spans all the columns using colspan.
A cell that spans two rows using rowspan.
An <audio> or <video> tag with the controls attribute.

Ready for the chapter test?

Answer 5 questions. Score 60% or more to mark this chapter complete.

Start the test →

💡 Log in to save your progress and earn the certificate.

← Previous

Lists, Images & Links

HTML Forms