New Posts
Home / Web Designing / HTML / How to Create HTML Table.

How to Create HTML Table.

How to Create HTML Table.

In this article, we’ll learn How to create HTML table. HTML Tables are designed to allow authors to structure data within rows and columns. While early web designers often abused tables by using them to control the layout of forms and pages, they were never really designed for that task, and should only be used to display tabular data. Tables can contain a wide variety of content including text, paragraphs, preformatted text, images, video, forms, and even other tables.

HTML TABLE

The basic structural elements of tables are the <table>,<tr>, <th>, and <td> tags. At the beginning of each table, you’ll use a <table> tag, which will wrap around the entire table. From there, you begin a row with a table row tag <tr>. Rows are populated with either a table header tag <th> or a table data tag <td>. Table headers represent header cells, while table data elements represent regular table cells.

HTML Tables are amazingly flexible. What types of contents hold. The table can hold text, paragraph headings, div tag, images, video even more complex structure, additional table.

Coding of Table.

<!doctype html>

<head>

<title>HTML Table</title>

</head>

<body>

<h1>Basic table structure</h1>

<h2>Sample table</h2>

<p>The following code:</p><pre>

<!–create table here–>

<table>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr><tr>

<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td>

<td>&nbsp;</td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>

</tr><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

</table>

</body>

</html>

 Adding Content to Tables.

<!doctype html>

<head>

<title>HTML Table</title>

</head>

<body>

<h1>Basic table structure</h1>

<h2>Sample table</h2>

<p>The following code:</p><pre>

<p>Would create the resulting table</p>

<!–create table here–>

<table border=”1″>

<tr><td>Tag</td>

<td>Name</td>

<td>Description</td></tr><tr><td>&lt;table&gt;</td>

<td>Table</td>

<td>Identifies what follows as a table.</td>

</tr><tr>

<td>&lt;tr&gt;</td><td>Table Row</td><td>Establishes a new row within the table</td></tr><tr><td>&lt;th&gt;</td><td>Table Header</td>

<td>Identifies the contents of a cell as being a header for a group of cells.</td>

</tr><tr><td>&lt;td&gt;</td><td>Table Cell</td><td>This element defines the individual table cells of an element.</td>

</tr>

</table>

</body>

</html>

 Setting Table Attributes.

Tables have multiple attributes that allow to you to modify certain visual aspects of tables itself.

Although most the attributes have been deprecated. Means remove in HTML5. It is important to know about them whether functionality is when it is appropriate to use them.

<!doctype html>

<head>

<title>HTML Table</title>

</head><body>

<h1>Setting table attributes</h1>

<h2>Sample table</h2>

<p>The following code:</p><pre>

<p>Would create the resulting table</p>

<!–create table here–>

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”80%”><tr>

<td>Tag</td><td>Name</td><td>Description</td></tr><tr><td>&lt;table&gt;</td><td>Table</td>

<td>Identifies what follows as a table.</td>

</tr><tr><td>&lt;tr&gt;</td><td>Table Row</td><td>Establishes a new row within the table</td>

</tr><tr><td>&lt;th&gt;</td><td>Table Header</td>

<td>Identifies the contents of a cell as being a header for a group of cells.</td></tr><tr>

<td>&lt;td&gt;</td><td>Table Cell</td><td>This element defines the individual table cells of an element.</td></tr><tr>

<td colspan=”3″>Learn more about tables from the <a href=”http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-datahttp://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-data” title=”HTML5 section on tabular data” target=”_blank”>HTML5 specification</a>.</td>

</tr>

</table>

</body>

</html>

 Adding Table Captions.

often you may want to give to user more information about the contents of the table or have the title represents the table subject by doing that you can give the table caption.

<!doctype html>

<head>

<title>Adding table captions</title>

</head>

<body>

<h1>Basic table structure</h1>

<h2>Sample table</h2>

<p>The following code:</p><pre>

<p>Would create the resulting table</p>

<!–create table here–><table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”80%”>

<caption><h3>Basic table elements:</h3></caption><tr><td>Tag</td><td>Name</td><td>Description</td>

</tr><tr><td>&lt;table&gt;</td><td>Table</td><td>Identifies what follows as a table.</td>

</tr><tr><td>&lt;tr&gt;</td><td>Table Row</td><td>Establishes a new row within the table</td></tr>

<tr><td>&lt;th&gt;</td><td>Table Header</td><td>Identifies the contents of a cell as being a header for a group of cells.</td>

</tr><tr><td>&lt;td&gt;</td><td>Table Cell</td><td>This element defines the individual table cells of an element.</td>

</tr><tr><td colspan=”3″>Learn more about tables from the <a href=”http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-datahttp://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-data” title=”HTML5 section on tabular data” target=”_blank”>HTML5 specification</a>.</td>

<tr><td colspan=”3″>Learn more about tables from the <a href=”http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-datahttp://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-data” title=”HTML5 section on tabular data” target=”_blank”>HTML5 specification</a>.</td>

</tr>

</table>

</body>

</html>

 Defining Table Headers.

So for we looked at three basic table structure table tag.

  1. Table.
  2. Table row.
  3. Table cell.

Here I want to introduce another structural tag. Really enhanced the meaning the table. That is table header tag.

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<title> Defining table headers </title>

</head><body>

<h1>Basic table structure</h1>

<h2>Sample table</h2>

<p>The following code:</p><pre>

<p>Would create the resulting table</p>

<!–create table here–>

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”80%”>

<caption>

<h1>Basic table elements:</h1>

</caption><tr><th>Tag</th><th>Name</th><th>Description</th></tr><tr>

<td>&lt;table&gt;</td><td>Table</td><td>Identifies what follows as a table.</td></tr><tr>

<td>&lt;tr&gt;</td><td>Table Row</td><td>Establishes a new row within the table</td></tr>

<tr><td>&lt;th&gt;</td><td>Table Header</td><td>Identifies the contents of a cell as being a header for a group of cells.</td>

</tr><tr><td>&lt;td&gt;</td><td>Table Cell</td><td>This element defines the individual table cells of an element.</td>

</tr><tr>         <td colspan=”3″>Learn more about tables from the <a href=”http://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-datahttp://www.w3.org/TR/2011/WD-html5-20110525/tabular-data.html#tabular-data” title=”HTML5 section on tabular data” target=”_blank”>HTML5 specification</a>.</td>

</tr>

</table>

</body>

</html>

 Making Table Data Accessible.

Here we will talk about table data more accessible. Accessibility real matter when it comes to the table. For example, when screen reader has to read table structure.

The table can get very complex and can be a very easy to a user to become confused about what data is applied to an order to things being read information within the table.  Something they want to read through in first place, not just for screen readers but really any type of device that scan through contents and pull contents the more you can make this data accessible and more you make the data accessible in more logic way you make the data the more successful to table going to be.

 

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

External Style Sheet

How to Use External Style Sheet. 

How to Use External Style Sheet. An External style sheet is simply texting files with …