Table with total html

Collect sum of a column in a html table?

you would do the following. Hope it helps.

   
 
12
 
Some value
 
 
2
 
Some value
 
 
17
 
Some value
 
 
 var tds = document.getElementById('countit').getElementsByTagName('td'); var sum = 0; for(var i = …

101,

The solution depends on why you need to do this?

If you build your table manually, then do the summation manually and type in the HTML for the totals row manually, complete with its values.

If your HTML is pasted from a spreadsheed, then get the …

I have changed my original code to work only by calculating the sum of rows that have ‘Donation $’ in the first column.

var trs = document.getElementById('cbtf_24').getElementsByTagName('tr'); var sum = 0; for(var i = 0; i < trs.length; i ++) < if(trs[i].childNode[1].className == 'fieldCell') < var lbl …

All 11 Replies

   
 
12
 
Some value
 
 
2
 
Some value
 
 
17
 
Some value
 
 
   

101, The solution depends on why you need to do this? If you build your table manually, then do the summation manually and type in the HTML for the totals row manually, complete with its values. If your HTML is pasted from a spreadsheed, then get the spreadsheet to do the totals and paste in the total rows along with the other rows. If you build the table dynamically, either server-side or client-side, then get the build script to do the summation and write the totals row as per the other rows. If the values in the table occur in response to some sort of user interaction(s), then OK, use JavaScript to scan the table and write in the totals but that would require the calculation script to be triggered by the user event(s) in question (data entry/button press or whatever) rather than using a "one-off" script embedded in the HTML. Write the code as a javascript function and call it from event handler(s) as appropriate. Also (from solution above), my IE6 (maybe other browsers) doesn't like document.getElementById('countit').innerHTML += '. '; . It may work in Moz/Opera, I haven't tested. For me, it's better to add to the bottom of the table (manually if that's how you write your HTML), then populate it from the calculation function. eg something like:

document.getElementById('total_1').innerHTML = sum1; document.getElementById('total_2').innerHTML = sum2;

This has the added advantage of allowing reuse; the function can be called more than once (per page-session) without adding a growing number total rows to the table, which is important if the purpose of all this is to respond to user events (in the plural). Apart from that, and with my proviso about reuse, Fungus' script will work if a one-off, in-line calculation is what's required. Hope this helps Airshow

Thanks for this code. We have used it to calculate Donations to a Public Radio Station in WA, but we have additional rows that we want to ignore (the Check Number). How would that work? Here is the code.

 
 
First Donation $:
 
2
 
 
First Donation Date:
 
01/01/2010
 
 
First Check Number:
 
101010
 
 
2nd Donation $:
 
1
 
 
2nd Donation Date:
 
-
 
 
2nd Check Number:
 
-
 
 
3rd Donation $:
 
4
 
 
3rd Donation Date:
 
-
 
 
3rd Check Number:
 
-
 
 
4th Donation $:
 
3
 
 
4th Donation Date:
 
-
 
 
4th Check Number:
 
-
 
 
5th Donation $:
 
99
 
 
5th Donation Date:
 
-
 
 
5th Check Number:
 
-
 
 
  

As you can tell, the Check Number would be included in the sum, which is obviously not intended. Please keep in mind that the id and class names are created by a content management system and cannot be changed. Is there a way to only parse td's where the previous td contains the text "Donation $" ?

Источник

HTML Tables – Table Tutorial with Example Code

Hillary Nyakundi

When you're building a project that needs to represent data visually, you will need a good way to display the information so it's easy to read and understand.

Now, depending on the type of data, you can select between different representation methods using HTML elements.

In most cases, tables are more convenient to display large amounts of structured data nicely. That’s why, in this article, we are going to learn how to use tables in HTML and then how to style them.

Here's an Interactive Scrim about HTML Tables

But, first things first – what is a table in HTML?

What is a Table in HTML?

A table is a representation of data arranged in rows and columns. Really, it's more like a spreadsheet. In HTML, with the help of tables, you can arrange data like images, text, links and so on into rows and columns of cells.

The use of tables in the web has become more popular recently because of the amazing HTML table tags that make it easier to create and design them.

Common HTML Table tags

HTML Table Syntax:

 
 
Cell 1
 
Cell 2
 
Cell 3
 
 
Cell 4
 
Cell 5
 
Cell 6
 
 
 

Now that you have an understanding of what an HTML table is all about and how you can create it, let's go ahead and see how we can make use of these tags to create tables with more features.

How to Add a Table Heading in HTML

The is used to add headings to tables. In basic designs the table heading will always take the top row, meaning we will have the declared in our first table row followed by the actual data in the table. By default the text passed in the Heading is centered and Bold.

An example with use of

 
 
First Name
 
Last Name
 
Email Address
 
 
Hillary
 
Nyakundi
 
tables@mail.com
 
 
Lary
 
Mak
 
developer@mail.com
 
 
 

From the example above, we are able to tell what column contains which information. This is made possible with the use of tag.

How to Add a Caption to a Table

The main use of adding a caption to table is to provide a description about the data represented in the table. The caption can either be placed at the top of the table or the bottom and by default it will always be centered.

To insert a caption into a table, use the tag.

Caption Syntax

An example with use of

 
Free Coding Resources
 
Sites
 
Youtube Channels
 
Mobile Appss
 
 
Freecode Camp
 
Freecode Camp
 
Enki
 
 
W3Schools
 
Academind
 
Programming Hero
 
 
Khan Academy
 
The Coding Train
 
Solo learn
 
 
 

Free Coding Resources

Sites	Youtube Channels	Mobile Appss
Freecode Camp	Freecode Camp	Enki
W3Schools	Academind	Programming Hero
Khan Academy	The Coding Train	Solo learn

How to Use the Scope Attribute in HTML Tables

The scope attribute is used to define whether a specific header is intended for either a column, row, or a group of both. I know the definition might be challenging to understand but hold on – with the help of an example you will better understand it.

The main purpose of the scope element is to show the target data so that the user does not have to rely on assumptions. The attribute is declared in the header cell , and it takes the values col , row , colgroup and rowgroup .

The values col and row indicated that the header cell is providing inforamation for either the rows or columns respectively.

Scope Syntax

An Example with use of

 
 
Semester
 
Grade
 
 
1
 
Jan - April
 
Credit
 
 
2
 
May - August
 
Pass
 
 
2
 
September - December
 
Distinction
 
 
 

What the scope attribute has done, is that it shows whether a header cell belongs to either the column, row, or a group of both.

In this case the headers belong to the column because it's what we set in the code. You can play around by changing the attribute to see the different behaviors.

How to Use Cell Spanning in an HTML Table

Perhaps you have come across cells that stretch across two or more columns or rows in a table. That's called cell spanning.

If you worked in programs like MS office or Excel you have probably used the function by highlighting the cells and clicking the command, and voilà! You have it.

The same features can be applied in an HTML table by using two cell attributes, colspan for horizontal spanning and rowspan for vertical spanning. The two attributes are assigned numbers greater that zero which shows the number of cells you wish to span.

An Example with use of span

 
 
Name
 
Subject
 
Marks
 
 
Hillary
 
Advanced Web
 
75
 
 
Operating Syatem
 
60
 
 
Lary
 
Advanced Web
 
80
 
 
Operating Syatem
 
75
 
 
Total Average: 72.5
 
 
 

Name	Subject	Marks
Hillary	Advanced Web	75
	Operating Syatem	60
Lary	Advanced Web	80
	Operating Syatem	75
Total Average: 72.5

In the example above, we have a cell spanning of 2 cells in the rows and 3 cells in the column as indicated. We have managed to apply the span both vertically and horizontally.

When using the attributes colspan and rowspan , make sure to declare the values assigned correclty to avoid overlapping of cells.

How to Add a Table Header, Body, & Footer in HTML Tables

Just like how a website or any other document has three main sections – the header, body, and footer – so does a table.

In a table they are divided by using attributes namely:

• - provides a separate haeder for the table
• - conatins main content of the table
• - creates a separete footer for the table

An Example with use of , &

 
 
 
October
 
November
 
 
 
 
Sales
 
Profit
 
Sales
 
Profit
 
 
$200,00
 
$50,00
 
$300,000
 
$70,000
 
 
 
 
November was more produstive
 
 
 
 

October		November
Sales	Profit	Sales	Profit
$200,00	$50,00	$300,000	$70,000
November was more produstive

In the above example, the header is represented by the name of the months, the part with the figures of both sales and profit represents the table body, and finally the part with the statement represents the footer of our table.

Another important thing to note is that a table can have more than one body part. In a scenario like this each body groups the rows that are related together.

How to Style HTML Tables using CSS

Even though tables are widely used today, it is very rare to find one that has not been styled. Most of them use different forms of styles, whether that's colors, fonts, highlighting important values and so on.

Styling helps make the tables appear proffesional and appealing to the eyes. Afterall you wouldn't want your reader to stare at data divided by only a sinle line.

Unlike styling with other languages or tools, in HTML you will need to get an extra file with a .css extension created where you will add your styles and link it to your HTML file.

Below, attached is a code playground with an example of a styled table. Feel free to play around with it to see how different styling will affect the display.

The code playground above, we have created a table and styled it using some of the attributes we covered in the article.

We styled it using a CSS file, where we have added the color and border to our table to make it more readable and beautiful. The table also has a fixed header so you can scroll through the large amount of data and still see the header of a particular column.

So, we have seen what a table is, we've created a few of them, and even gone a step ahead and applied styling.

But having the knowledge and not knowing how to apply it won't be of any help. So that being said, where or when do you need to make use of tables in your design?

When to Use a Table

There are many situations where tables might come in handy when developing your projects:

• You can use tables when you want to compare and contrast data with shared characteristics like the differences between A and B or scores of team X to those of Y.
• You can also use one if you want to give an overview of numerical data. A good example of this is when you are trying to represent marks of students or even the scores of teams like the EPL table.
• And a table can help readers quickly find specific information laid out in a clear way. For example if you are going through a long list of name a table can be used to sub devide the list which make it easy for readers.

Wrap Up

And you can also add some styling to make them look good and present the data clearly with the help of a CSS file.

Before we wrap up, let's do one more task:

Create a table using what we learned to summarize what we have covered in the article today. After that compare your design with my pinned code playground below:

Источник