CSS Tutorials

R4R^®

CSS

CSS Examples

How to make margin on page

Sample page template of CSS

CSS Interview Materials

CSS subjective question

CSS Interview question

CSS Objective question

CSS FAQS

Table in CSS

Home

Creating a Table

Tables are made up of data that is contained within columns and rows, and HTML supplies several different elements for defining and structuring these items. At a minimum a table must consist of <table>, <tr> (table row), and <td> (table data) elements. For greater structure and additional semantic value, tables may include the <th> (table header) element and a few other elements as well. When all of these elements are working together, they produce a solid table.

Table

We use the <table> element to initialize a table on a page. Using the <table> element signifies that the information within this element will be tabular data displayed in the necessary columns and rows.

<table>
</table>

Table Row

Once a table has been defined in HTML, table rows may be added using the <tr> element. A table can have numerous table rows, or <tr> elements. Depending on the amount of information there is to display, the number of table rows may be substantial.

<table>
  <tr>
    ...
  </tr>
  <tr>
    ...
  </tr>
</table>

Table Data

Once a table is defined and rows within that table have been set up, data cells may be added to the table via the table data, or <td>, element. Listing multiple <td> elements one after the other will create columns within a table row.

<table>
<tr>
<td class="heading" style="width:50;">First Name</td> 
<td class="heading" style="width:50;">Last Name</td>
</tr>
<tr>
<td class="alternate_heading1">Rajiv</td> 
<td class="alternate_heading1">Kumar</td>
</tr>
<tr>
<td class="alternate_heading2">Kuldeep</td> 
<td class="alternate_heading2">Kumar</td>
</tr>
</table>

Table Header

To designate a heading for a column or row of cells, the table header element, <th>, should be used. The <th> element works just like the <td> element in that it creates a cell for data. The value to using the <th> element over the <td> element is that the table header element provides semantic value by signifying that the data within the cell is a heading, while the <td> element only represents a generic piece of data.

Table headers may be used within both columns and rows; the data within a table determines where the headers are appropriate. The scope attribute helps to identify exactly what content a table header relates to. The scope attribute indicates with the values col, row, colgroup, and rowgroup whether a table header applies to a row or column.

simple example of Table

<html>
<head>
<style>
table , td{
background:#FFFFFF;
font-weight:normal;
border:thin;
}
</style>
</head>
<body>
<div class="table_content">
<table>
 <tr>
<td class="heading" style="width:80;">First Name</td>
<td class="heading" style="width:70;">Last Name</td>
</tr>
<tr>
<td class="alternate_heading1">Rajiv</td>
<td class="alternate_heading1">Kumar</td>
</tr>
<tr>
<td class="alternate_heading2">Kuldeep</td> 
<td class="alternate_heading2">Kumar</td>
</tr>
</table>
</div>
</body>
</html>