# How do we display a table cell in HTML

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>
</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 ;
}
th[scope="col"] {
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.