The Tag

**vinodpathak_214** · 22-01-2009

How can i create a table in HTML. Give me the code

**FReakMaster** · 22-01-2009

Thread Moved

**unlimitedtech** · 22-01-2009

Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

The important HTML tags for tables are:

<table></table> (opens and closes a table)
<tr></tr> (opens and closes a table row)
<td><td> (opens and closes a table cell, inside a column)

Example:

HTML Code:

<table>

<tr>  
<td>A</td>
<td>B</td>
<td>C</td>  
</tr>

<tr>  
<td>X</td>
<td>Y</td>
<td>Z</td>  
</tr>

</table>

The result would be like this:

A B C
X Y Z

**Khushal** · 22-01-2009

Following is the methods from JavaScript to create an HTML table dynamically. It creates a small table with four cells and text content inside each cell. The text content of the cell is: "cell is row y column x" showing the row and column numbers for that cell in the table.

HTML Code:

<html>
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
    function start() {
        // get the reference for the body
        var body = document.getElementsByTagName("body")[0];

        // creates a <table> element and a <tbody> element
        var tbl     = document.createElement("table");
        var tblBody = document.createElement("tbody");

        // creating all cells
        for (var j = 0; j < 2; j++) {
            // creates a table row
            var row = document.createElement("tr");

            for (var i = 0; i < 2; i++) {
                // Create a <td> element and a text node, make the text
                // node the contents of the <td>, and put the <td> at
                // the end of the table row
                var cell = document.createElement("td");
                var cellText = document.createTextNode("cell is row "+j+", column "+i);
                cell.appendChild(cellText);
                row.appendChild(cell);
            }

            // add the row to the end of the table body
            tblBody.appendChild(row);
        }

        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        // appends <table> into <body>
        body.appendChild(tbl);
        // sets the border attribute of tbl to 2;
        tbl.setAttribute("border", "2");
    }
</script>
</head>
<body onload="start()">
</body>
</html>

Note the order in which we created the elements and the text node:

First we created the <table> element.
Next, we created the <tbody> element, which is a child of the <table> element.
Next, we used a loop to create the <tr> elements, which are children of the <tbody> element.
For each <tr> element, we used a loop to create the <td> elements, which are children of <tr> elements.
For each <td> element, we then created the text node with the table cell's text.

Thread: The Tag

Thread Tools

The Tag

Re: The Tag

Re: The Tag

Re: The Tag

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions