Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How HTML Tables work in Web Development

The article is about the working of html tables and its significance in web development.

Tables are distinct by way of the <table> tag. A table is separated addicted to rows (by the <tr> tag), in addition to each row is separated into data cells (by the <td> tag). td stands for "table data," as well as holds the contented of a data cell. A <td> tag be capable of enclose text, links, images, lists, forms, other tables, and so on.

An HTML table is an element comprise of table rows and columns, a large amount similar to you'd perceive when functioning with a purpose such as Excel. Tables are container elements, and their sole points are to residence other HTML elements and place them in a tabular manner row by row, column by column.

The HTML table elements insert a table within the article. Tables are an extremely helpful as well as commanding element of the HTML language, as they provide an explanation designed for insert several categories of tabulate data in the article.

This element is the major container of a table, except lots of extra elements are required to identify a table appropriately. Added elements so as to form a table are:

  • Rows (HTML tr element)
  • Cells (HTML td element)
  • Header cells (HTML th element)
  • Caption or title (HTML caption element)

An HTML table be capable of be alive essentially measured as a place of rows contain cells as well as not backwards. This is since the HTML tr element be designed to enclose cell elements (HTML td element and HTML th element).

A table is able to be separated horizontally, important these section:

  • Header (HTML thead element)
  • Body or bodies (HTML tbody element)
  • Footer (HTML tfoot element)

Besides, column be capable of be thematically group by means of the HTML colgroup element.

Finally, the HTML col element be capable of be use to be appropriate manner attribute to every one of cells in a number of successive columns at formerly.

Note: - The "align" attribute for this element have been deprecated in HTML 4.01 in support of style sheets.

Listing 1: Table Example

Save as table.html

<table border="2">
<tr>
<th>row 1, cell 1</th>
<th>row 1, cell 2</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 3, cell 1</td>
<td>row 3, cell 2</td>
</tr>
</table>

HTML Code display in your Browser:

Table example

Figure 1: Table example

HTML Tables and the Border Attribute

If you execute not recognize a border attribute, the table strength of mind be present with no borders. Sometimes this be clever to be alive useful, but near all and sundry of the point in instance, we need the borders to demonstrate.

On the technique to show a table through borders, recognize the border attribute:

Listing 2: Example of Border Attribute

Save as table2.html

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
</tr>
</table>

HTML Code display in your Browser:

table2.html

Figure 2: table2.html

HTML Table Headers

Header in sequence into a table is different by the <th> tag.

All major browsers determine put on show the text in the <th> element as bold with centered.

Listing 3: Example of html table headers

Save as table3.html

<table border="2">
<tr>
<th>H1</th>
<th>H2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML Code display in your Browser:

table3.html

Figure 3: table3.html

Tables without borders:

How to create tables without borders?

Listing 4: Example of table without borders

Save as table4.html

<html>
<body>

This table has no borders:
<table>
<tr>
  <td>10</td>
  <td>20</td>
  <td>30</td>
</tr>
<tr>
  <td>40</td>
  <td>50</td>
  <td>60</td>
</tr>
</table>

And this table has 0 value borders:

<table border="0">
<tr>
  <td>10</td>
  <td>20</td>
  <td>30</td>
</tr>
<tr>
  <td>40</td>
  <td>50</td>
  <td>60</td>
</tr>
</table>

</body>
</html>

HTML Code display in your Browser:

table4.html

Figure 4: table4.html

Table headers:

Listing 5: Creating table headers example

Save as table5.html

<html>
<body>

Table headers
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>phone no.</th>
</tr>
<tr>
<td>john</td>
<td>55</td>
<td>3445556</td>
</tr>
</table>

Vertical table headers

<table border="1">
<tr>
<th>First Name</th>
<td> john </td>
</tr>
<tr>
<th>Age</th>
<td>55</td>
</tr>
<tr>
<th>phone no.</th>
<td>3445556</td>
</tr>
</table>

</body>
</html>

HTML Code display in your Browser:

table5.html

Figure 5: table5.html

Table with a caption:

Listing 6: Adding caption to a table

<html>
<body>

<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$50</td>
</tr>
<tr>
<td>May</td>
<td>$100</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
<tr>
<td>July</td>
<td>$100</td>
</tr>
<tr>
<td>August</td>
<td>$50</td>
</tr>
</table>

</body>
</html>

HTML Code display in your Browser:

table6.html

Figure 6: table6.html

Table Examples:

Below list the 'rowspan' example in a td tag.

<TABLE border=1>
<TR>
  <TD>my 1st table</TD>
  <TD>my 1st table</TD>
</TR>
</TABLE>

The code above gives us this:

my 1st table my 1st table

We will now go ahead and incorporate one more table row and put a single table definition in it.

<TABLE border=1>
<TR>
  <TD>my 1st table</TD>
  <TD>my 1st table</TD>
</TR>
<TR>
  <TD>my 1st table</TD>
</TR>
</TABLE>

The code above gives us this:

my 1st table my 1st table
my 1st table

We will come up and add rowspan=2 to the first table definition in the first table row <TD rowspan=2>

<TABLE BORDER=1>
<TR>
<TD rowspan=2>
my 1st table
</TD>
<TD>
my 1st table
</TD>
</TR>
<TR>
<TD>
my 1st table
</TD>
</TABLE>
my 1st table
my 1st table my 1st table

We now list the same table with rowspan=2 added to the second table definition in the first table row.

<TABLE BORDER=1>
<TR>
<TD>
my 1st table
</TD>
<TD rowspan=2>
my 1st table
</TD>
</TR>
<TR>
<TD>
my 1st table
</TD>
</TABLE>	
my 1st table my 1st table
my 1st table

summary (text)

Provides summary of the table's point and arrangement. The within sequence in this attribute is theoretical to make bigger the filling of the HTML caption element.

Summaries should be as short, accurate and descriptive as potential, as there are key in to help blind public interpret the comfortable of the table.

Example:

<table summary="List of user register in HTML tutorial">

width (length)

This attribute specify the preferred width of the complete table. If the width isn't individual in any technique, user agent concludes its value.

<table width="50%">

frame

Specifies which side of the frame neighboring the table determination is rendered. Possible case-insensitive values are:

  • void: No sides. This is the default value.
  • above: The top side only.
  • below: The bottom side only.
  • hsides: The top and bottom sides only.
  • vsides: The right and left sides only.
  • lhs: The left-hand side only.
  • rhs: The right-hand side only.
  • box: All four sides.
  • border: All four sides.

Example:

<table frames="box">

rules

Specifies which system is thankful to be render stuck between cells surrounded by a table. Promising case-insensitive values are:

  • none: any rules. This is the default value.
  • groups: Rules will be shown between row groups (HTML thead element, HTML tfoot element, and HTML tbody element) and column groups (HTML colgroup element and HTML col element) only.
  • rows: Rules will be rendered between rows only.
  • cols: Rules will appear between columns only.
  • all: Rules be rendered between all rows and columns.

Example:

<table rules="groups">

border (pixels)

Define the width of the border of a table as a number of pixels.

Example:

<table border="2">

cellspacing (length)

Defines the width of the breathing space to be left among cells. It also refers to the breathing space between the edge of a table and the contiguous cells.

Listing 7: Example of cellspacing:

<table cellspacing="20" border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>

HTML Code display in your Browser:

cellspacing example

Figure 7: cellspacing example

cellpadding (length)

Defines the width of the space to be left among a cell's contented in addition to its border.

Listing 8: Example of length cellpadding

<table cellpadding="20" border="2">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>

HTML Code display in your Browser:

cellpadding example

Figure 8: cellpadding example

align

This attribute have be deprecated in HTML 4.01. Consequently its make use of is no longer not compulsory.

It decides the horizontal arrangement of the table. Potential values (case-insensitive) be:

  • left: The table is aligned to the left margin.
  • right: The table is aligned to the right margin.
  • center: The table is centered.

Example:

<table align="right">

Conclusion

We saw about the working of html tables with its importance in the web development. Hope you liked the tutorial.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login