HTML and Tables.

Spock96 · #1 06-11-12, 10:40

Hey Guys,
I'm working on my final project for my HTML class. What I have to do is make a personal web site.

I have it all down except this table:

Quote:

<Table Border="7">
<tr>
<th colspan="2">My Guitars.</th>
</tr>

<tr>
<td><b>My newest addition-- Ibanez V70</b></td>
<td><img src="Ibanez.jpg" alt="Ibanez"></td>
</tr>

<tr>
<td><b>My Electric-- First Act ME201</b></td>
<td><img src="ME201.jpg" alt="Electric"></td>
</tr>

<tr>
<td><b>first guitar-- First Act MG374 Acoustic Steel String Guitar (36-Inch, Blue with Star Graphics)</b></td>
<td><img src="First Act Acoustic.jpg" alt="First Guitar"></td>
</tr>
</table>

It works, just that my descriptions of my pictures, those cells are huge and my text isn't. How could I fix that?
Thanks,
Spock96

GermanOne · #2 06-11-12, 11:52

Just use a style sheet.

Code:

<style type="text/css">
  table tr td:first-child { width:20%; }
</style>

Regards
GermanOne

mjnc · #3 06-11-12, 12:35

You can also add a line break in that long description.

Code:

 <tr>
 <td><b>first guitar-- First Act MG374 Acoustic Steel String Guitar <br>(36-Inch, Blue with Star Graphics)</b></td>
 <td><img src="First Act Acoustic.jpg" alt="First Guitar"></td>
 </tr>

Spock96 · #4 06-11-12, 16:54

Quote:

Originally Posted by GermanOne

Just use a style sheet.

Code:

<style type="text/css">
  table tr td:first-child { width:20%; }
</style>

Regards
GermanOne

Where would I put this in my code?

GermanOne · #5 06-11-12, 18:24

Usually in the head.

Small example with your table (slightly changed to show how css work):

PHP Code:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <title>Test</title>

    <style type="text/css">

     /*<![CDATA[*/

      table                   { width:100%; font:16px "Times New Roman", Times, serif; border:7px outset black; }

      table th                { font-size:20px; text-decoration:underline; }

      table th, tr, td        { border:1px outset black; }

      table tr td:first-child { width:20%; font-weight:bold; }

     /*]]>*/

    </style>

  </head>

  <body>

    <table>

      <tr>

        <th colspan="2">My Guitars.</th>

      </tr>

      <tr>

        <td>My newest addition-- Ibanez V70</td>

        <td><img src="Ibanez.jpg" alt="Ibanez" /></td>

      </tr>

      <tr>

        <td>My Electric-- First Act ME201</td>

        <td><img src="ME201.jpg" alt="Electric" /></td>

      </tr>

      <tr>

        <td>first guitar-- First Act MG374 Acoustic Steel String Guitar (36-Inch, Blue with Star Graphics)</td>

        <td><img src="First Act Acoustic.jpg" alt="First Guitar" /></td>

      </tr>

    </table> 

  </body>

</html>

Regards
GermanOne

Spock96 · #6 06-13-12, 10:20

This is my problem,

Quote:

<tr>
<td>First guitar-- First Act MG374 Acoustic Steel String Guitar (36-Inch, Blue with Star Graphics)</td>

Is there a way that I can "break" that into two lines?
Like this:

Quote:

First guitar-- First Act MG374 Acoustic Steel String Guitar
(36-Inch, Blue with Star Graphics)

GermanOne · #7 06-13-12, 10:59

Use the <br> tag as mjnc already mentioned.

Regards
GermanOne

Spock96 · #8 06-13-12, 11:25

Quote:

Originally Posted by GermanOne

Use the <br> tag as mjnc already mentioned.

Regards
GermanOne

Oh, ok. Thank you.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Help with Routing Tables	savoxis	Networking	1	01-10-08 11:16
MS Word tables	rbilleaud	Software	0	07-11-06 13:38
tables in MS Word...	technaut	Software	7	05-10-06 23:27
Tables HTML PHP	mastermosley	Programming	0	01-30-06 22:07
Tables (HTML)	DinoRoberts	Programming	6	11-16-03 19:18