Menu
Coddy logo textTech
START LEARNING
flag En iconEnglishdown icon

Table Basics

Part of the Fundamentals section of Coddy's HTML journey — lesson 48 of 60.

In HTML, a table is a way to organize data into rows and columns. Tables are commonly used to display data in a structured format, such as schedules, statistics, or any other type of information that can be presented in a grid. To create a table, you use the <table> tag along with other tags like <tr> for table rows, <td> for table data (cells), and <th> for table headers.

Here's the basic structure of an HTML table:

<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>Row 1, Cell 1</td>
		<td>Row 1, Cell 2</td>
	</tr>
	<tr>
		<td>Row 2, Cell 1</td>
		<td>Row 2, Cell 2</td>
	</tr>
</table>
  • <table>: The tag that defines the table.
  • <tr>: The tag that defines a table row.
  • <th>: The tag that defines a header cell. Header cells are typically used for column or row titles and are displayed in bold by default.
  • <td>: The tag that defines a standard cell in the table.

Here's how this table would be rendered in a browser:

Header 1Header 2
Row 1, Cell 1Row 1, Cell 2
Row 2, Cell 1Row 2, Cell 2

In this example, we have a table with two rows and two columns. The first row contains header cells, and the subsequent rows contain regular data cells. This structure creates a simple grid layout that is easy to read and understand.

challenge icon

Challenge

Easy

Create an HTML document that includes a table with the following structure:

  1. A <table> tag to define the table.
  2. A table row (<tr>) for the header with two header cells (<th>). The first header cell should say "Name", and the second should say "Age".
  3. A table row (<tr>) with two data cells (<td>). The first cell should say "John", and the second should say "30".
  4. Another table row (<tr>) with two data cells (<td>). The first cell should say "Jane", and the second should say "25".

Cheat sheet

HTML tables organize data into rows and columns using the <table> tag:

  • <table>: Defines the table
  • <tr>: Defines a table row
  • <th>: Defines a header cell (displayed in bold by default)
  • <td>: Defines a standard data cell
<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
	</tr>
	<tr>
		<td>Row 1, Cell 1</td>
		<td>Row 1, Cell 2</td>
	</tr>
	<tr>
		<td>Row 2, Cell 1</td>
		<td>Row 2, Cell 2</td>
	</tr>
</table>

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <!-- Write code here -->
    </body>
</html>
quiz iconTest yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Fundamentals

1HTML Basics

What is HTML?Basic Structure of an HTMLTags and ElementsNesting and Closing TagsComments in HTML

4Recipe Card

Project OverviewRecipe Title and DescriptionProject lessonIngredientsProject lessonStepsProject lesson

7Personal Profile Page

Project OverviewHeader SectionProject lessonProfile PictureProject lessonAbout Me SectionProject lessonSocial LinksProject lesson

10Tables

Table BasicsAdding CaptionsSpanning Rows and ColumnsRecap - Tables

2Text and Formatting

HeadingsParagraphsLine BreaksBold and Italic TextBold and Italic AgainRecap - Formatting

5Adding Content

HTML AttributesLinksNew Page LinksImagesImage Attributes

8Forms and Inputs Part 1

Form BasicsText InputsInput AttributesPassword FieldLabels for InputsRecap - Basic Form

11Event Registration Page

Project OverviewHeader SectionProject lessonEvent Details SectionProject lessonRegistration FormProject lessonFooter SectionProject lesson

3Working with Lists

Unordered ListOrdered ListNested ListsRecap - Lists

6Page Layout

DivisionsInline SpansSemantic TagsSections and ArticlesRecap - Layout

9Forms and Inputs Part 2

Radio ButtonsCheckboxesDropdownsButtonsButtons in FormsRecap - Forms #1Recap - Forms #2

12Final Challenges

Simple Profile CardEvent Invitation CardSimple Article PageFavorite Books List