HTML 4.01 Table Editing

Adjusting HTML tables in Allwebco templates

Information below does not apply to 2013 and later HTML5 templates.

• See: Table centering and borders in HTML5

Tip: How to preview tables [HTML 4.01]

Using Notepad: If you're editing using Notepad or a plain text editor, find some table code in one of the HTML pages, this will be some code that starts out with <table border="0" or something similar (click the "view visual" below). Make the border="1" so you can see an outline of the table you plan to edit. There are many tables on most pages so it may take a few tries to find the area you wish to edit. Have your browser and Notepad open at the same time so you can preview quickly. Do a small edit, then refresh your browser to see the results.

Using HTML editing software: If you're editing using a wysiwyg HTML editor, there should be an option to show all "tags" or if you select an area you should see the table outline. If this is not working, switch to "HTML view" or "edit HTML" and use the Notepad preview tip in the paragraph above.


Changing table widths and margins
Template table widths and margins and padding may be defined in the template css file using a class named ".content-width" or "#maincontent" or a similar class name. You can search the css file for "content" to locate this code.



If the main page content width is not defined in the css file then it will be included in the HTML pages in the table tag areas.

When you are changing a table width in the HTML pages, you can either define the width in percents: width="90%" or you can define the table width in pixels: width="450". Do not exceed 750 pixels for your total page width so you will be properly visible on computers running 800 x 600 resolution. Click the "view visual" below to see how and what to edit to change a table.



If you adjust the table width and it does not update, code for the width may also be defined in your template CSS file.


Whitespace left and right
In some templates table right and left spacing may be defined in the CSS file. The CSS classes may be "rightspace" or "whitespace" or something similar. You can try a search for "space" in the CSS file to locate these classes.


NOTE: About re-sizing a sidebar
If you are re-sizing a sidebar area, this may not be an easy edit. You may need to edit some graphics in your "picts" folder and you may also need to edit some table widths in one of the .js files such as the sidebar.js or the menu.js, as well as code in your CSS file. You may also need to edit other tables on the page to adjust to the new sidebar sizes.


NOTE: Changing table sizes in a .js file
.js files are used for the header, menu, copyright and sidebar on many Allwebco templates. To change a table width in one of the .js files. Follow the above directions just as if you were editing a normal HTML page. You can still make a border="1" to preview the table and you can still change the table widths in pixels or percents.


How to locate code that defines table widths:
There are a few factors that can define the width or height of a table or table cell on a template HTML page or inside a .js file.

Tables sizes can be defined by: code in the global .css file, spacers in the HTML pages, widths in the HTML pages, images on the HTML page or in a .js file.

1. Check for widths in your .css file, or a section for page widths and heights.
   
   
2. Search for the following in your HTML pages:
   
   class=
   
   ...this will tell you any classes used in the HTML page for possible widths that will be in the global .css file. Match the class name in the HTML page with the class name in the .css file. Search for...
   
   spacer.gif
   
   ...this will show you any spacers in the page. Check the spacer widths. Search for...
   
   width=
   
   ...this will tell you any widths used in the HTML code. CSS code overwrites any widths in the HTML pages so also check for a class along with the width. There may, or may not, be a class included.

Advanced users: Splitting / adding table cells:
In any template you can add more table cells or split cells to include more columns or rows. This is not supported by Allwebco. Search at Google for help with table editing.




Related Topics:
Editing HTML5 Tables
Choosing Software