15. Table Methods
Join the Discussion
If you are coding your HTML using modern techniques then you aren't using tables for layout and are using CSS instead. Tables therefore will be an infrequent addition to your web pages as they will only be used where you have real tabular data to display - which is what tables were added to HTML for in the first place before people hijacked them to set up multicolumn layouts (of course CSS can produce far more complex layouts in much less code than tables can).
Where you do include tables in your page you can of course use all of the standard DOM methods that we have already looked at to access the individual component parts of the table (except for innerHTML which can't be used to reference pieces of tables). Given the number of tags that make up a typical table this would involve a huge amount of code to make even simple changes. The DOM does however provide a special set of access methods specifically for tables in order to reduce the code needed down to a manageable level.
Let's start by looking at the HTML tags that make up a small table so that we can see where all of the component parts are that you may need to access (since many people leave out a lot of the tags that ought to be included since they were not useful when using tables for layout).
Where certain of these tags are omitted from your table definition the browser assumes their existance in the appropriate spots in the table and so when you access the table via the DOM those elements will still appear in their appropriate spots. It is best to always code the requisite tags yourself to make sure that you remember that they are there. The caption, thead, and tfoot entries can be safely omitted if you don't have any actual content to put in them but the tbody is always assumed to be there since it is what holds the body of your table content.
The DOM provides the following additional properties and methods that process against the table element itself:
In addition to these there are also several DOM methods that apply specifically to the tbody and tr tags. The ones for tbody are:
Note that these properties and methods will only produce the same result as the corresponding table ones when there are no rows in the thead or tfoot.
The tr element has the following DOM properties and methods:
Note that those methods where a position is required, the position to use is the numerical value corrersponding to the location of the element withi the array accessible via the corresponding property, ie. to delete or insert at the start you use position 0.