HTML Table: Creating Tables in Web Pages
☰Fullscreen
Table of Content:
- Building Table
- Live Preview
- Live Preview
- Basic Table Elements and Attributes
- The align Attribute
- Html Code
- Live Preview
- Html Code
- Live Preview
- Html Code
- Live Preview
- The bgcolor Attribute
- Live Preview
- The border Attribute
- Live Preview
- Related Questions
- Related Assignment
- Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.
You'll often need to present large amounts of organized information, and HTML has some wonderful tools to manage this task. HTML has three kinds of lists and a powerful table structure for organizing the content of your page.
Tables display information in rows and columns; they are commonly used to display all manner of data that fits in a grid such as train schedules, television listings, financial reports, and sports results. In this chapter, you learn when to use tables, and the markup that you need to create them.
Building Table
Sometimes, you’ll encounter data that fits best in a tabular format. HTML supports several table tags for this kind of work. You can think of a table as being very similar to a spreadsheet because it is made up of rows and columns, as shown in Figure.
Here you can see a grid of rectangles. Each rectangle is known as a cell . A row is made up of a set of cells on the same line from left to right, and a column is made up of a line of cells going from top to bottom.
Let's look at an example of a very basic XHTML table so that you can see how they are created
Live Preview
Live Preview
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
By default (in most browsers, anyway), tables don't show their borders. If you want to see basic table borders, you can turn on the table's border attribute. (An attribute is a special modifier you can attach to some tags.)
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="atv">"1"</span><span class="tag">></span><span class="pln"> </span>
Basic Table Elements and Attributes
Sometimes, you need a little more flexibility in your table design. For that these are some attribute to make our table flexibile
- The
<table>Element Creates a Table - The
alignAttribute - The
bgcolorAttribute - The
borderAttribute - The
cellpaddingAttribute - The
cellspacingAttribute - The
dirAttribute - The
frameAttribute - The
rulesAttribute - The
summaryAttribute - The
widthAttribute - The
<tr>Element Contains Table Rows - The
alignAttribute - The
bgcolorAttribute - The
charAttribute - The
charoffAttribute - The
valignAttribute - The
<td>and<th>Elements Represent Table Cells - The
abbrAttribute - The
alignAttribute - The
axisAttribute - The
bgcolorAttribute - The
charAttribute - The
charoffAttribute - The
colspanAttribute - The
headersAttribute - The
heightAttribute - The
nowrapAttribute - The
rowspanAttribute - The
scopeAttribute - The
valignAttribute - The
widthAttribute - Adding a
<caption>to a Table - Spanning Columns Using the
colspanAttribute - Spanning Rows Using the
rowspanAttribute - Splitting Up Tables Using a Head, Body, and Foot
- Grouping Columns Using the
<colgroup>Element - Columns Sharing Styles Using the
<col>Element - Nested Tables
The align Attribute
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">></span><span class="pln"> </span>
Html Code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"left"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Although it is deprecated, the align attribute is still frequently used with tables. When used with the &lt;table&gt; element, it indicates whether the table should be aligned to the left (the default), right , or center of the page.(When used with cells, as you will see shortly, it aligns the content of that cell.)</span><span class="tag"></p></span><span class="pln"> </span>
Live Preview
Html Code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Although it is deprecated, the align attribute is still frequently used with tables. When used with the &lt;table&gt; element, it indicates whether the table should be aligned to the left (the default), right , or center of the page.(When used with cells, as you will see shortly, it aligns the content of that cell.)</span><span class="tag"></p></span><span class="pln"> </span>
Live Preview
Html Code
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"1"</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"center"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span><span class="tag"><p></span><span class="pln">Although it is deprecated, the align attribute is still frequently used with tables. When used with the &lt;table&gt; element, it indicates whether the table should be aligned to the left (the default), right , or center of the page.(When used with cells, as you will see shortly, it aligns the content of that cell.)</span><span class="tag"></p></span><span class="pln"> </span>
Live Preview
The bgcolor Attribute
The bgcolor attribute sets the background color for the table. The value of this attribute should either be
a color name or a six - digit code known as a hex code . The bgcolor attribute has been replaced by the
background-color property in CSS.
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">bgcolor</span><span class="pun">=</span><span class="atv">"red"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
The border Attribute
Using border attribute, we can create a border around both the table and each individual cell.
The value for this attribute is the width you want the outside border of the table to be, in pixels. If we
give this attribute a value of 0 , or if you do not use this attribute, then you should not get any borders on
either the table or any cells. This has been replaced by the border property in CSS.
<span class="pln"> </span><span class="tag"><table</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 1, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"><tr></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 1 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"><td></span><span class="pln"> Row 2, Column 2 </span><span class="tag"></td></span><span class="pln"> </span><span class="tag"></tr></span><span class="pln"> </span><span class="tag"></table></span><span class="pln"> </span>
Live Preview
- Question 1:
Write an HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50
Related Questions
- Assignment 1: Write HTML code for the following Table
- Assignment 2: Write code for this table.