• bellydancedreams

    (@bellydancedreams)


    Hi, I am trying to get cell borders between the boxes on my site. it shows up on the visual tab (in the editing screen) but when I go to view the website in a browser then it doesn’t come up.

    I used the code for the border

    <table style="width: 100%;" border="1">

    Here is the link: http://www.thurrocktutors.co.uk/fees/

    And the full code I used (editing out text):

    <table style="width: 100%;" border="1">
    <tbody>
    <tr>
    <th><b>Individual Tuition</b></th>
    <th><b>Private Group Tuition</b></th>
    </tr>
    <tr>
    <td style="width: 50%;">
    <p style="text-align: center;">The rates for 1 to 1 private tuition at the centre are a.........
    </td>
    <td>
    <p style="text-align: center;">Why not team up with your friends to spread the cost?.....<p>
    </td>
    </tr>
    <tr>
    <th colspan="2">Open Group Tuition</th>
    </tr>
    <tr>
    <td colspan="2">We also arrange group tuition ....</td>
    </tr>
    <tr>
    <th colspan="2">Home Tuition</th>
    </tr>
    <tr>
    <td colspan="2">If you are looking ....</td>
    </tr>
    </tbody>
    </table>
Viewing 7 replies - 1 through 7 (of 7 total)
  • Jamie Gill

    (@patchgill)

    Hi there,

    You could try setting a simple border with css as so

    <table style="width: 100%; border:1px solid #fff">

    1px is the thickness of the border and #fff is the color hex code for white.

    Hope this helps
    J

    Thread Starter bellydancedreams

    (@bellydancedreams)

    Ooh thanks, NEARLY there… the vertical line between ‘Individual Tuition’ and ‘Private Group Tuition’ is still missing (although that code did get the others to appear) >.<

    Jamie Gill

    (@patchgill)

    Ahh sorry I thought you meant just the table. After the two table heading where you have 50% <td> element, replace the first one from

    <td 50%;="" style="width:">

    It look like its in wrong anyway but change it to

    <td style="width:50%; border-right:1px solid #fff">

    Cheers
    J

    Thread Starter bellydancedreams

    (@bellydancedreams)

    Wow, brillant, thanks for that! I honestly spent around an hour googling how to do that 😀 I guess I was searching the wrong terms.

    How could I get the same for the lines above ‘Open Group Tuition’ and ‘Home Tuition’? I.e. below or above the previous cells of the table…

    Jamie Gill

    (@patchgill)

    Great stuff well done!

    Just replace the TH elements like so

    <th colspan="2">Open Group Tuition</th>

    to

    <th colspan="2" style="border-top:1px solid #fff">Open Group Tuition</th>

    And the same for Home

    <th colspan="2">Home Tuition</th>

    to

    <th colspan="2" style="border-top:1px solid #fff">Home Tuition</th>

    Hope this resolves it for you

    Cheers
    J

    Thread Starter bellydancedreams

    (@bellydancedreams)

    Oh thank you so much! I did just try adjusting it myself but it didn’t want to work when I experimented codes myself lol

    Thanks a million J! {}

    Jamie Gill

    (@patchgill)

    No problem glad its resolved dude

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘bordering cells in a HTML table’ is closed to new replies.