HTML Table code


Create the Table Style:
Background Colour, Cell Border Size, Table width, Border Colour etc.

< table >
< tbody >
< tr >
< td >Column Heading 1< /td >
< td >Column Heading 2< /td >
< td >Column Heading 3< /td >
< td >Column Heading 4< /td >
< td >Column Heading 5< /td >
< td >Column Heading 6< /td >
< /tr >
< tr >
< td >Row 1 Col 1< /td >
< td >Row 1 Col 2< /td >
< td >Row 1 Col 3< /td >
< td >Row 1 Col 4< /td >
< td >Row 1 Col 5< /td >
< td >Row 1 Col 6< /td >
< /tr >
< tr >
< td >Row 2 Col 1< /td >
< td >Row 2 Col 2< /td >
< td >Row 2 Col 3< /td >
< td >Row 2 Col 4< /td >
< td >Row 2 Col 5< /td >
< td >Row 2 Col 6< /td >
< /tr >
< /tr >
< /tbody >
< /table >

The above, after the spaces are removed after and before the < and >, will produce a table like this:

Column Heading 1 Column Heading 2 Column Heading 3 Column Heading 4 Column Heading 5 Column Heading 6
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3 Row 1 Col 4 Row 1 Col 5 Row 1 Col 6
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3 Row 2 Col 4 Row 2 Col 5 Row 2 Col 6

It can be made more complex by adding background colour, borders etc, into the TABLE code.

This change was made by changing the TABLE code to:
< table border=”9″ bgcolor=”#FFFF00″ >

Column Heading 1 Column Heading 2 Column Heading 3 Column Heading 4 Column Heading 5 Column Heading 6
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3 Row 1 Col 4 Row 1 Col 5 Row 1 Col 6
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3 Row 2 Col 4 Row 2 Col 5 Row 2 Col 6

More changes can include the header columns, with the addition of the BOLD code < b > and < /b > as follows:
< td >< b >Column Heading 1< /b >< /td >

This then give us:

Column Heading 1 Column Heading 2 Column Heading 3 Column Heading 4 Column Heading 5 Column Heading 6
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3 Row 1 Col 4 Row 1 Col 5 Row 1 Col 6
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3 Row 2 Col 4 Row 2 Col 5 Row 2 Col 6

Don’t like the border ?
Change the code in TABLE to show 1 instead of 9, or even 0, if you want no borders.  This example has 1 for a border.

Column Heading 1 Column Heading 2 Column Heading 3 Column Heading 4 Column Heading 5 Column Heading 6
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3 Row 1 Col 4 Row 1 Col 5 Row 1 Col 6
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3 Row 2 Col 4 Row 2 Col 5 Row 2 Col 6

This example uses a TABLE code of:
< table style=”border-collapse: collapse” cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFFF00″ border=”1″ >

Column Heading 1 Column Heading 2 Column Heading 3 Column Heading 4 Column Heading 5 Column Heading 6
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3 Row 1 Col 4 Row 1 Col 5 Row 1 Col 6
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3 Row 2 Col 4 Row 2 Col 5 Row 2 Col 6

The puzzle here is that the preview shows the above with a yellow background, but for some reason, the background colour is not showing above.


67.1 - 870,711
Scroll down for Comments
0 0 votes
Article Rating
Subscribe
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x