How do we display a table cell in HTML

HTML Web Development Front End Technology

In this article we are going to learn about how do we display a table cell in HTML. Before jumping into the article let’s have a look on the HTML table

A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet. A table is a visual representation of rows and columns of data. You may organise data like photos, text, links, and more into rows and columns of cells in HTML by using tables.

Table Cell in HTML

Table cells can span many columns and rows and contain the header information as well as data. The non-visual user agents can more effectively convey the information to the user when each cell is labelled in the HTML 4 table mode. The <td> HTML element defines a cell of a table that contains data.

It supports the following attributes −

Attribute	Value	Description
abbr	abbreviated_text	Deprecated − Specifies an abbreviated version of the content in a cell.
align	right left center justify char	Deprecated − Visual alignment.
axis	Name	Deprecated − Specifies a category for this td. This can potentially be used to perform queries against the table data and can be beneficial in the context of a speech browser
bgcolor	rgb(x,x,x) #hexcode Colorname	Deprecated − Specifies the background color of the table cell.
char	Character	Deprecated − Specifies which character to align text on. Used when align = "char"
charoff	pixels or %	Deprecated − Specifies an alignment offset (either in pixels or percentage value) against the first character as specified with the char attribute. Used when align = "char"
colspan	Number	Specifies the number of columns the current cell spans across.
header	Id	Specifies a space-separated list of header cells that contain information about this cell. The value needs to correspond with the id of the header cell (which is set using the id attribute). This attribute is useful for non-visual browsers.
height	Pixels	Deprecated − Specifies the height of the table cell.
nowrap	Nowrap	Deprecated − Prevents text from automatically wrapping.
rowspan	Numbers	Specifies the number of rows the current cell spans across.
scope	col colgroup row rowgroup	Deprecated − This attribute is used on header cells and specifies the cells that will use this header's information.
valign	top middle bottom baseline	Deprecated − Vertical alignment.
width	pixels or %	Deprecated − Specifies the width of the table cell

Let’s look into the following examples for getting better understanding.

Example

In the following example we are creating a table consisting of table cells.

<!DOCTYPE html>
<html>
   <style>
      table {
         border:2px solid #F39C12;
      }
      th{
         border:2px solid #D1F2EB;
      }
      td{
         border:2px solid #D1F2EB;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th>NAME</th>
         <th>COMPANY</th>
      </tr>
      <tr>
         <td>Varma</td>
         <td>Google</td>
      </tr>
      <tr>
         <td>Nikhil</td>
         <td>Infosys</td>
      </tr>
   </table>
</body>
</html>

On running the above script, the output window pops up, displaying the table consisting of the data used in the above script on the webpage.

Using Scope

The cells that the header, which is defined in the <th> element, pertains to are specified by this counted attribute. To specify the row or column for which it is a header, use this property only in conjunction with the <th> element.

Example

Considering the following example we are creating a table cells using scope.

<!DOCTYPE html>
<html>
   <style>
      td,th {
         border: 2px solid #ABEBC6 ;
         padding: 10px;
      }
      th[scope="col"] {
         background-color:#5DADE2;
         color: #fff;
      }
      th[scope="row"] {
         background-color: #d7d9f2;
      }
      table {
         border-collapse: collapse;
         letter-spacing: 1px;
         font-family: sans-serif;
         font-size: .8rem;
      }
   </style>
<body>
   <table>
      <caption>PLAYERS AND THEIR TEAM</caption>
      <tr>
         <th scope="col">PLAYERS</th>
         <th scope="col"> IPL TEAM</th>
      </tr>
      <tr>
         <th scope="row">DHONI</th>
         <td>CSK</td>
      </tr>
      <tr>
         <th scope="row">RISHAB PANT</th>
         <td>DELHI CAPTIALS</td>
      </tr>
      <tr>
         <th scope="row">JOS BUTTLER</th>
         <td>RAJASTHAN ROYALS</td>
      </tr>
   </table>
</body>
</html>

When the script gets executed, it will generate an output consisting of a table with cells in it along with the data we mentioned in the script on the webpage.