Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
<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.
389 Views
