Explain the basic table Structure . Create an HTML Document for the following figure.
OneTwo
ThreeFour


Basic Table Structure

At their most basic, tables are made up cells, arranged into rows. You can control display characteristics for the whole table, for individual rows, and for individual cells.

<table border="1px" style="width:300px">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill</td>
      <td>Smith</td>       
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>     
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>     
      <td>80</td>
    </tr>
  </tbody>
</table>

 

(1) Kinds of cell in HTML

A table cell in HTML is a non-empty element and should always be closed. There are two different kinds of table cell in HTML: normal table cell and header cell. <td> denotes a table cell, the name implying 'data', while <th> denotes a table 'header'. The two can be used interchangeably, but it is recommended that header cell be only used for the top and side headers of a table.

Syntax:-

A table cell also must be nested within a <table> tag and a <tr> (table row) tag. If there are more table cell tags in any given row than in any other, the particular <tr> must be given a colspan attribute declaring how many columns of cells wide it should be.

Example:-

An example of an HTML table containing 4 cells:

Cell 1 Cell 2
Cell 3 Cell 4

 

(2) Data Type

A data type must be specified for each column & for each attributes compromising on abstract data type. They are classifieed broadly as pre-defined data type.

<!DOCTYPE html>
<html>
<body>
<table border="1" cellspacing="0">
<tr>
<th rowspan="2"> One</th>
<th colspan="2">Two</th>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</table>
</body>
</html>

 output:-

 

One Two
Three Four


Share to whatsapp

More Questions from Web Technology and its Applications Module 2

What does floating an element do in CSS ? How do you float an element?
View
Explain different forms of text input controls with example.
View
Discuss <table> element along row spanning and column
View
What is Responsive Design? Explain the components that make responsive web design. Why its important ? explain in detail.
View

Write short note on radio buttons and check boxes?


View
Types of list in HTML (Unordered List , Ordered List , Nested Lists, Definition Lists)
View
Explain Positioning elements in CSS
View