bordering cells in a HTML table

  • 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: https://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)

  • 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) >.<

    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…

    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! {}

    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.