MCQs Test!! VB Basic Test !! Essentials of VB !! Creating User Services !! function !! Anatomy !! GK March-2019 !! DATA TYPES IN JAVA !! Classes ,Constructor ,Methods,Inheritance !! Ecology-I !! Biology 2019 !! Gk april 2019 !! Biology (living world) !! Plant anatomy !! CELL STRUCTURES AND FUNCTION !! General biology !! Human physiology !! Data structure !! Ecology-II !! GK TEST !! Reproduction in plants !! Human reproduction !! The ABC of C !! Operating system set1 !! Operating system set2 !! Gk and current affairs !! Animal kingdom !! Number system !! Animal kingdom-II !! Gk TEST-III !! Number series !! Microorganisms !! Interview question in c !! Time and Work !! Percentage !! General history !! Average !! Cells !! Locomotion and Movement !! paging !! Bacteriology !! Page replacement policy !! Secondary memory and Disk scheduling !! Introduction of Nervous System and neurons !! Plant harmones !! Transport and Mineral Nutrition in Plants !! Neurotransmitters !! Modern Indian History !! Photosynthesis in Plants !! Modern Indian History-II !! Plant respiration !! Environment & Biodiversity !! Environment & Biodiversity - II !! Algae, Bryophytes, Pteridophytes !! Area !! Cricket !! Days of the Year (India and the World) !! Plant Pathology - I !! Indian Transport System !! Plant Pathology - II !! Aptitude !! Biology !! Botany !! C language !! Computer Science !! Core Java !! Gate !! GK !! Mysql !! Operating system !! Physics !! VB-Visual Basic !! Zoology

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