innerHTML, table and buttons

Question

I am new to this. Where is the old API bible?

I am building a table consisting of <button> elements and submit it through  innerHTML.

<table id="Table1" class="imgtype" ><tr><td><img src="/sets/jpc/br.gif" id=1/></td><td><img src="/sets/jpc/bn.gif" id=2/></td><td><img src="/sets/jpc/bb.gif" id=3/> ... etc

.imgtype {width:40px; heigth:20px; background-color:darkviolet;border-color:red; }

Only the background works like red,darkviolet.

How do I change the text,borders and width and heigth ??

Answer 1

In order to set the border color you have to show the border first. This can be achieved by adding

border-style: solid

to your css. The text color gets set by the color property:

color: green;

regarding height and width, you can play around with min-height, max-height, min-width and max-width. If your images are however larger than the table, they will break your design. One option would be put the images into div elements like this:

    <table id="Table1" class="imgtype">
        <tr>
            <td>
                <div><img src="/images/logo.png" id="1" /></div></td>
            <td>
                <div><img src="/images/storelogo.png" id="2" /></div></td>
            <td>
                <div><img src="/images/smalllogo.png" id="3" /></div></td>
        </tr>
    </table>

and then stze those divs and apply an overflow to them

.imgtype {width:40px; height: 20px;max-width: 40px;max-height: 20px; background-color:darkviolet;border-color:red;border-style: solid;color: yellow }

.imgtype div { overflow: auto;width:40px; height: 20px;max-width: 40px;max-height: 20px; }

Answer 2

Thank you for the advice. I also had a mix up, and that was driving me crazy. Thank you.