Question 182712 in Html Question posted in
Some basic documentation can be found here.

HTML TABLE help needed

This kinda works the way i want it. AS in the first table has the background image working just fine and its resizing the image just fine.

But the prob im having is now when i try to make another table inside the first table its still using the first background from the first table even though im telling it to use a new background image.

So how do i do this so the style ends after it does the first table, and not get used in the 2 table that is inside the first table.

Thanks ahead of time for any help.

<html>
<head>

<title></title> 
<style>
table{
  background: #000 url(background1.png);
  height: 100%;
  border: none;
  margin: 0px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center; 
}
</style>
</head>


<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" margin="0" padding="0" link="#1FOOFF" vlink= "#1FOOFF" alink="#1FOOFF" >
<center><table width="100%" height="100%" border="0" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" margin="0" padding="0" cellspacing="0" cellpadding="0" >
 <tr> 
  <td width="100%" height="100%" valign="top" >

### this is where i want the style to end and use a new image ###

<table width="800" height="10" background:"backgroun2.png">
<tr>
<td valign="center" width="25 height="10" bgcolor="red" >
<font size="5" face="Arial"><b>&nbsp;NEWS:&nbsp;&nbsp;</b>
</td><td valign="top" width="575" height="10" bgcolor="black" >
<center><font size="5" face="Arial"><font color="#FFFFFF"><marquee bgcolor="black" behavior="scroll" direction="left" >Now is the time to buy Gold and Silver.</marquee></font></font></center>
</td></tr></table>
</td></tr></table>
Tags:

2

Answers


  1. 0

    Try using CSS classes instead of referencing the table by type. That way you can give your outer table different styles to your inner table. See here for information about CSS classes.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

    e.g.

    <style>
  .outer-table {
    background: #000 url(background1.png);
    ...
  }
</style>

<body>
  <table class="outer-table">
    ...
    <table>
      ...
    </table>
  </table>
</body>
    Login or Signup to reply.
  2. 0

    You have two possibilities here:
    First one is just to set a class for each one of your tables.

    <head>
  <title></title>
  <style>
    table{
    background: #000 url(background1.png);
    height: 100%;
    border: none;
    margin: 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center; 
    }
    .bg-1{
      background: #000 url(background1.png);
    }
    .bg-2{
      background: #000 url(background2.png);
    }
  </style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" margin="0" padding="0" link="#1FOOFF" vlink= "#1FOOFF" alink="#1FOOFF" >
  <center>
  <table class="bg-1" width="100%" height="100%" border="0" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" margin="0" padding="0" cellspacing="0" cellpadding="0" >
    <tr>
      <td width="100%" height="100%" valign="top" >
        ### this is where i want the style to end and use a new image ###
        <table  class="class="bg-2"" width="800" height="10" background:"backgroun2.png">
          <tr>
            <td valign="center" width="25 height="10" bgcolor="red" >
            <font size="5" face="Arial"><b>&nbsp;NEWS:&nbsp;&nbsp;</b>
            </td>
            <td valign="top" width="575" height="10" bgcolor="black" >
              <center>
                <font size="5" face="Arial">
                  <font color="#FFFFFF">
                    <marquee bgcolor="black" behavior="scroll" direction="left" >Now is the time to buy Gold and Silver.</marquee>
                  </font>
                </font>
              </center>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</head>

    Or you can just add it in CSS so your second bg apply only to the tables insides a table

    table{
background: #000 url(background1.png);
height: 100%;
border: none;
margin: 0px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center; 
}
table table{
background: #000 url(background2.png);
}

    Personnally i would rather recommand the first option 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search