Home arrow HTML arrow Page 6 - HTML Tables
HTML

HTML Tables


In our last tutorial we discussed how to create different types of frames and position them on the page. We also covered the various types of lists we can create. And I even let you in on a little recipe in my plot to make you fatter than me. In this tutorial we will go over tables (you will need a place to put that dinner I told you how to make after all) and how to insert them into your web pages.

Author Info:
By: James Payne
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
January 30, 2008
TABLE OF CONTENTS:
  1. · HTML Tables
  2. · Headings in Tables
  3. · Spanning More than One Row or Column
  4. · Using Tags Inside of Tables
  5. · Cellpadding and Cellspacing
  6. · Setting Backgrounds in Tables and Cells
  7. · Aligning Data within Your Cells

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
HTML Tables - Setting Backgrounds in Tables and Cells
(Page 6 of 7 )

Wanna make dem tables pertier? Woo-eee you betcha do. Well you can do so by using the bgcolor attribute to set the color, or the background attribute to set an image for the table's background:


<html>

<body>

<h2>How to Set the Background Color of a Table:</h2>

<table border="1"

bgcolor="brown">

<tr>

<td>Some</td>

<td>Text</td>

</tr>

</table>

<h2>How to Set a Background Image in a Table:</h2>

<table border="1"

background="somebackground.jpg">

<tr>

<td>More</td>

<td>Text</td>

</tr>

</table>

</body>

</html>

The above sets the color of one table, and an image as a background for another table. This is how to set the background color and background image for a cell within a table, as opposed to the entire table:


<html>

<body>


<h4>Cell backgrounds:</h4>

<table border="1">

<tr>

<td bgcolor="yellow">Color</td>

<td>No Color</td>

</tr>

<tr>

<td

background="sample.jpg">

Picture</td>

<td>No Picture</td>

</tr>

</table>


</body>

</html>

The above creates a table with four cells. One cell has a color in it and the cell next to it does not. In the second row, the first cell has an image for a background, while the cell to the right of it does not. Note that it is important to ensure your background (whether it be an image or a color) does not clash with your text. It is also important to ensure that your text is readable on the background that you choose; white text on a white background simply won't do, for example.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials