w3resource

HTML5: How to define a cell in a table?

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to define a cell in a table</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table border = "1"><!-- Table element with border attribute set to "1" -->
<tr><!-- Table row element -->
<th>Type</th><!-- Table header cell for column "Type" -->
<th>Description</th><!-- Table header cell for column "Description" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>PHP</td><!-- Table data cell with content "PHP" -->
<td>Server side scripting</td><!-- Table data cell with content "Server side scripting" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>JavaScript</td><!-- Table data cell with content "JavaScript" -->
<td>Client side scripting</td><!-- Table data cell with content "Client side scripting" -->
</tr><!-- End of table row -->
</table><!-- End of table -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

  • This HTML code defines a webpage with a table displaying types and descriptions.
  • The <table> tag creates a table structure.
  • Each row of the table is defined by the <tr> (table row) tag.
  • Within each row, cells are defined using the <th> (table header) tag for header cells and <td> (table data) tag for data cells.
  • The first row contains table header cells <th> for column headings "Type" and "Description".
  • Subsequent rows contain data cells <td> with content representing different types and their descriptions.
  • The border="1" attribute in the <table> tag adds a border around the table cells for better visualization.

Live Demo:

See the Pen td-answer by w3resource (@w3resource) on CodePen.


See the solution in the browser

Supported browser

Firefox logo Chrome logo Opera logo Safari logo Internet Explorer logo
Yes Yes Yes Yes Yes

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.