HTML Table Background

Trang chủ » Html Table Cell Background Image Resize » HTML Table Background

Có thể bạn quan tâm

HTML Table Background

This page contains HTML table background code. This code enables you to modify the background of your HTML tables. For example, you can change the background color or add a background image to your tables.

Setting All Background Styles

There is a shorthand CSS property that allows you to set all your background styles in one go. This property is the background property.

This is the property that most web developers use for setting their table backgrounds, as it's quicker to use and it helps to minimize code. This property allows you to set the background color and a background image properties using one property. You can see it in action with the following example.

If you have difficulty understanding this property, have a look at the other examples on this page. They should make things a bit clearer for you.

<!DOCTYPE html> <html> <head> <title>Example</title> <!-- CSS --> <style> .myTableBg { width: 100%; text-align: left; background: white url(/pix/samples/celebrate.gif) repeat; border-collapse: collapse; } .myTableBg td, .myTableBg th { border:2px solid black; padding:5px; } </style> </head> <body> <!-- HTML --> <table class="myTableBg"> <tr> <th>Header</th> <th>Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table> </body> </html>

View Output

Background Color

The following example demonstrates how background color can be applied to the table using the background-color property. Check out HTML Table Background Color to see more examples of adding background color to a table.

<!DOCTYPE html> <html> <head> <title>Example</title> <!-- CSS --> <style> .myTableBg2 { width: 100%; text-align: left; background-color: lemonchiffon; } </style> </head> <body> <!-- HTML --> <table class="myTableBg2"> <tr> <th>Header</th> <th>Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table> </body> </html>

View Output

Table Background Image

Here's an example of adding a background image to your table by using the CSS background-image property.

The background image in this example automatically repeats across the full width and height of the table. In other words, if the background image is smaller than the table, it will be displayed again and again until it reaches the edge of the table.

Here's the actual image that we will use in the following example:

Background Image

As you can see, this image is smaller than the width of the table, so it repeated across the full width and height of the table.

In this example, we also add a thin border to our table. Here's more about HTML table borders.

<!DOCTYPE html> <html> <head> <title>Example</title> <!-- CSS --> <style> .myTableBg3 { width:100%; min-width: 260px; min-height:200px; text-align: center; background-image:url('/pix/samples/bg1.gif'); border:1px solid black; } </style> </head> <body> <!-- HTML --> <table class="myTableBg3"> <tr> <th>Header</th> <th>Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table> </body> </html>

View Output

Non-Repeating Background Image

Sometimes you might not want the background image to repeat. Sometimes you might want it to appear once only. For this effect, you can use the CSS background-repeat property. You can also use the background-position property to define where the image is positioned within the table. For example, you could position the image in the center of the table, or at the top-left or bottom-right etc.

<!DOCTYPE html> <html> <head> <title>Example</title> <!-- CSS --> <style> .myTableBg4 { width:100%; min-width: 260px; min-height:200px; text-align: center; background-image:url('/pix/samples/celebrate.gif'); background-repeat: no-repeat; background-position: center center; border: 1px solid black; } </style> </head> <body> <!-- HTML --> <table class="myTableBg4"> <tr> <th>Header</th> <th>Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> </tr> </table> </body> </html>

View Output

Background Image on Table Cells

You could also add a background image to each individual table cell. You could use a different image for each cell or the same image. If you use the same image, it would give it that "repeat" effect and the "repeat" could be precisely aligned with each table cell (but it doesn't have to be). You could also achieve this effect using a repeating background image on the whole table, but you'd need to ensure that each cell is exactly the same size as the image, and you might need to play around with the table border.

Here's an example of adding a background image to each cell using a CSS class with an embedded style sheet:

<!DOCTYPE html> <html> <head> <title>Example</title> <!-- CSS --> <style> .cellImage { width: 100%; text-align: center; border: 1px solid black; } .cellImage td { width:120px; height:70px; padding:5px; background-image: url(/pix/samples/celebrate.gif); background-position: center center; background-repeat: no-repeat; } </style> </head> <body> <!-- HTML --> <table class="cellImage"> <tr> <th>Header</th> <th>Header</th> <th>Header</th> </tr> <tr> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </table> </body> </html>

View Output

HTML Reference

  • Screenshot of HTML code

    HTML Tutorial

    Free HTML tutorial that explains how to code in HTML.

    This tutorial explains what HTML elements and attributes are, and how to use them.

    I explain the basics, such as what you need in order to write HTML and how to create your first web page.

    I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.

    I also explain the difference between HTML and CSS (and when to use each one).

    Go to HTML Tutorial
  • Screenshot of HTML tags

    HTML Tags

    Full list of all HTML elements.

    This is an alphabetical list of HTML elements, linking to a full page of details for each element.

    All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).

    Go to HTML Tags
  • Screenshot of CSS Properties

    CSS Properties

    Full list of CSS properties.

    Alphabetical list of CSS properties as per the W3C specifications.

    CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.

    You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.

    Go to CSS Properties

Từ khóa » Html Table Cell Background Image Resize