5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

Need Help With Simple HTML Table

by ErnieB
4 replies
  • WEB DESIGN
    • |
Im using html to create some tables on my site. Basically Im creating several tables and centering them all on the page. The tables will have 3 rows with the first row being a text title, the 2nd row actually being a picture and the final row being some more text ( centered within the table )

However, due to the text being different legths, it is creating tables that arent the same size and look odd.

So my question is, How do I add a "width" to the table code, so all the tables are exactly the same size?

Heres basically what im using right now...

Code:
<center>
<table border="1">
<tr>
<th>Title of the picture here</th>
</tr>
<tr>
<td><center><img src="http://urlofpicturehere.com"></center></td>
</tr>
<tr>
<td><center>Descriptive text here</center></td>
</tr>
</table>
<br/>
<table>
<tr>
<th>Alot longer title which creates a wider table here</th>
</tr>
<tr>
<td><center><img src="http://urlofpicturehere.com"></center></td>
</tr>
<tr>
<td><center>Descriptive text here</center></td>
</tr>
</table>
</center>
#html #simple #table
  • Profile picture of the author tryinhere
    Free Online HTML Editor

    use this free HTML editor, to create the table / add text / sizes you want then select the source code options and copy and paste that into your site.

    by right clicking in the cell you can edit cell properties / select width properties
    Signature
    | > Choosing to go off the grid for a while to focus on family, work and life in general. Have a great 2020 < |
    {{ DiscussionBoard.errors[3029281].message }}
  • Profile picture of the author ErnieB
    Thanks, I was able to use that to figure out the simple addition I needed to make.
    {{ DiscussionBoard.errors[3029315].message }}
  • Profile picture of the author Steve Wells
    Originally Posted by ErnieB View Post

    Im using html to create some tables on my site. Basically Im creating several tables and centering them all on the page. The tables will have 3 rows with the first row being a text title, the 2nd row actually being a picture and the final row being some more text ( centered within the table )

    However, due to the text being different legths, it is creating tables that arent the same size and look odd.

    So my question is, How do I add a "width" to the table code, so all the tables are exactly the same size?

    Heres basically what im using right now...

    Code:
    <center>
<table border="1">
<tr>
<th>Title of the picture here</th>
</tr>
<tr>
<td><center><img src="http://urlofpicturehere.com"></center></td>
</tr>
<tr>
<td><center>Descriptive text here</center></td>
</tr>
</table>
<br/>
<table>
<tr>
<th>Alot longer title which creates a wider table here</th>
</tr>
<tr>
<td><center><img src="http://urlofpicturehere.com"></center></td>
</tr>
<tr>
<td><center>Descriptive text here</center></td>
</tr>
</table>
</center>
    In order to make this actually W3C compliant you will need to center the tables and add the width, within the table tag itself, or with css.

    The code below should be W3C compliant......depending on what doc type you are using.

    <table width="400" border="1" align="center">
    <tr>
    <th>Title of the picture here</th>
    </tr>
    <tr>
    <td><center><img src="http://urlofpicturehere.com"></center></td>
    </tr>
    <tr>
    <td><center>Descriptive text here</center></td>
    </tr>
    </table>
    <br />
    <table width="400" align="center">
    <tr>
    <th>Alot longer title which creates a wider table here</th>
    </tr>
    <tr>
    <td><center><img src="http://urlofpicturehere.com"></center></td>
    </tr>
    <tr>
    <td><center>Descriptive text here</center></td>
    </tr>
    </table>
    Or you can use this: which is 100% compliant since w3s actually generated it.....

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
    <html>
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
    <title></title>

    <style type="text/css">
    div.c1 {text-align: center}
    </style>
    </head>
    <body>
    <table width="400" border="1" align="center">
    <tr>
    <th>Title of the picture here</th>
    </tr>
    <tr>
    <td>
    <div class="c1"><img src="http://urlofpicturehere.com" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
    </td>
    </tr>
    <tr>
    <td>
    <div class="c1">Descriptive text here</div>
    </td>
    </tr>
    </table>
    <br>
    <table width="400" align="center">
    <tr>
    <th>Alot longer title which creates a wider table here</th>
    </tr>
    <tr>
    <td>
    <div class="c1"><img src="http://urlofpicturehere.com" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
    </td>
    </tr>
    <tr>
    <td>
    <div class="c1">Descriptive text here</div>
    </td>
    </tr>
    </table>
    </body>
    </html>
    Signature
    Need Custom Graphics Work? - Message Me For A Design Quote!
    {{ DiscussionBoard.errors[3029673].message }}
  • Profile picture of the author web.tech
    Give width to the table like
    <table width="100%">
    <tr>
    <td><td/>
    <td><td/>
    <tr/>
    <table/>
    Or wrap the text with a div and give a class to the div, you can customize your design.
    {{ DiscussionBoard.errors[3030338].message }}

Trending Topics