CSS Tutorials

Table in CSS
Previous Home Next

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.

  1. Table
  2. 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>
    
  3. Table Row
  4. 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>
    
  5. Table Data
  6. 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>
    

     

  7. Table Header
  8. 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>

Output:

Previous Home Next

Tolal:0 Click:

Show All Comments

Did not find what you were looking for leave your name and message. We will revert within 24 hours
Name:
eMail:
Comment / Feedback: