The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Sharepoint 2010 vs. HTML tables, having issues getting tables to wrap
nowords
post Mar 9 2016, 01:29 PM
Post #1





Group: Members
Posts: 1
Joined: 9-March 16
Member No.: 24,054



Morning all- In need of some assistance. I'm working on updating a SharePoint 2010 site using HTML. the goal is simply to create tables with three rows; the tricky part for me comes in when I try to create additional tables like the first side by side; I can only get them to stack vertically. Below is the HTML i'm working with, any suggestions would be GREATLY appreciated.

<div 1st column>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
<div 2nd column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
<div 3rd column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
</div>
<div 4th column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
</div>
<div 5th column>
<table>
<tbody>
<tr>
<td>
<table border="1" style="border-top: black thin; border-left: black thin; border-right: black thin; border-bottom: black thin">
</td>
<tr>
<td style="background-color: green"; dir="ltr"><p align="center"><b>WorkstreamName</b></p></td>
</tr>
<tr>
<td height="100" style="background-color: lightgrey"; dir="ltr"><a href="#"><p align="center"><b>Status</b></p></td>
</tr>
<tr>
<td style="background-color: lightblue"; dir="ltr"><p align="center"><b>Owner</b></p></td>
</tr>
</tbody>
</table>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 9 2016, 06:15 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,134
Joined: 9-August 06
Member No.: 6



Float the columns left.

But first all of your tables are broken and there are some other significant errors too.

The first two DIVS lack closing tags. Add them.

You use nested tables, i.e. each of your "visible tables" are made up of two tables. You only close one of them. You need to close both. Each section ends like this - those that have a closing DIV tag that is.

CODE
</tr>
</tbody>
</table>
</div>


It should be like this.

CODE
</tr>
</tbody>
</table>
</tbody>
</table>
</div>


Your start tags for DIV look like this.

CODE
<div 1st column>


You can't write comments like "1st column" directly in a tag like that. You must write them outside the tag in a real comment.

http://htmlhelp.com/faq/html/basics.html#html-comments

So remove those and instead add a class. You can call it anything, lets say 'col'.

CODE
<div class="col">


Then in your style sheet add this line.

CODE
.col   { float: left }


Done.

In fact, I don't see why nested tables are needed. What we see on the page is one table with three single cell rows. Why not write it like that?

I'm assuming you want to add more tables to each column? Because if you don't the DIVs aren't needed either. You could remove them and use the class with the outer tables instead or the single tables, whatever way you go.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th February 2019 - 06:31 PM