I am trying to have two HTML tables side by side on a Sharepoint webpage. I have noticed that Sharepoint strips anything away from in between <style></style> tags. Also strips information in <div><\div> tags.
I have this, currently.
<body>
<div>
<table style="width:40%" border="1px solid black" float="left" width="148px" margin-right=" 4%">
<caption>List</caption>
<tr>
<td>3</td>
<td>3 TB</td>
<td>10</td>
</tr>
<tr>
<td><b>P</b></td>
<td><b>S</b></td>
<td><b>U</td>
</tr>
</table>
<table style="width:40%" border="1px solid black" float="left" width="148px" margin-right=" 4%">
<caption>Arts List</caption>
<tr>
<td>3</td>
<td>3</td>
<td>10</td>
</tr>
<tr>
<td><b>P</b></td>
<td><b> S</b></td>
<td><b>U</td>
</tr>
</table>
/div>
Is it even possible to have two HTML tables side by side in sharePoint. (Without div/style tags)
Use nested tables.
<table>
<tr>
<td>
<table>
...
</table>
</td>
<td>
<table>
...
</table>
</td>
</tr>
</table>
You can have two tables next to each other by floating them left and making the widths small enough to fit horizontally like so:
<table style="float:left;width:50%;box-sizing:border-box;">
...
</table>
<table style="float:left;width:50%;box-sizing:border-box;">
...
</table>
The style attribute should be one continuous string.
So this
<table style="width:40%" border="1px solid black" float="left" width="148px" margin-right=" 4%">
should be this
<table style="width: 40%; border: 1px solid black; float: left; width: 148px; margin-right: 4%;">
I had the same problem in my job and I do not have the permission to use SharePoint designer;
To have 2 different tables in a single "Layout Column" I did the following:
1) Create a table with 1 row and 2 columns.
2) Inside each column add the table. The table would fit automatically or you can modify the width and the high on the ribbon.
3) Change the style of the 1st table to "Table Style 1 - Clear" to eliminate the border.
Related
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
My default table looks like this, with 4 separate cells:
I want to create a table with this schema (merge r1c1 & r1c2 &r2c2):
My default table code is:
<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td>r1c1</td>
<td>r1c2</td>
</tr>
<tr>
<td>r2c1</td>
<td>r2c2</td>
</tr>
</table>
And my merged table code look like this (but doesn't do what I wanted!):
<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td colspan="2" rowspan="2">r1c1 & r1c2 & r2c2</td>
</tr>
<tr>
<td >r2c1</td>
</tr>
</table>
How do I get those three cells merged using colspan and rowspan?
No you cannot implement this with table cells. However, A similar layout can be displayed using css styles as shown in this fiddle.
html
<table border="2">
<caption style="border: 1px dotted;">Table 1</caption>
<tr>
<td id="r1c1" colspan="2">r1c1 & r1c2</td>
</tr>
<tr>
<td>r2c1</td>
<td id="r2c2" rowspan="2">r2c2</td>
</tr>
</table>
css
#r1c1 {
border: none !important;
}
#r2c2 {
border: none !important;
}
You can create a similar L shape using div tags by applying similar css styles as shown in this fiddle. Also you can refer this link to find css styles for creating various shapes.
I have nested table. Both tables needs border. The only difference is that I need only the bottom border of the inner table rather having top, bottom, right and left. I need the default border style which comes using the following code.
<table border="1">
Problem comes when I use this code for the inner table. It sets the outer border too rather setting bottom border. If I remove top right and left border it does not remove the border correctly. Please check the following code which I used to fix this issue.
<table border="1" width="100%">
<tr>
<td valign="top">VMware Certified Professional</td>
<td style="padding:0px;">
<table border="1">
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
</table>
</td>
</tr>
<tr>
<td valign="top">VMware Certified Associate</td>
<td style="padding:0px;">
<table border="1">
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
<tr><td>hello</td></tr>
</table>
</td>
</tr>
</table>
Screenshot is attached to show default border style which I need.
Attached is the layout which I want
Is this what you are looking for?
http://jsfiddle.net/5Ax52/1/
Using CSS:
table.inner td {
border-top: 1px solid #444;
border-bottom: 1px solid #afafaf;
width:100%;
}
There are two inner tables, and assuming that “I need only the bottom border of the inner table rather having top, bottom, right and left” refers to both of them, just set the borders you don’t want to none as follows (see jsfiddle):
<style>
table table {
border-top: none;
border-left: none;
border-right: none;
}
</style>
An alternative, pure HTML way (which works well, despite being flagged “deprecated” in HTML 4 and “obsolete” in HTML5) is to use the attribute frame="below" in the inner <table> elements. See alternative jsfiddle.
The results look odd, though, and maybe you meant to ask something different.
After going trough many solutions. I found the following solution good for me.
<style>
.tbl_head{ width:35%;}
</style>
<table cellpadding="3" border="1" align="center">
<tr>
<td rowspan="3" valign="top" class="tbl_head">ALIGNVALIGNALIGN</td>
<td>First</td>
</tr>
<tr>
<td>Second</td>
</tr>
<tr>
<td>Third</td>
</tr>
<tr>
<td rowspan="3" valign="top" class="tbl_head">VALIGNALIGNVALIGN</td>
<td>First</td>
</tr>
<tr>
<td>Second</td>
</tr>
<tr>
<td>Third</td>
</tr>
</table>
i want to;
1.remove a small part of this table and make a free space there.i comennted it on the code.
2.also to center the words in the table.
CAN ANY ONE HELP ME PLEASE?(Please use only HTML not css or javascript)
<html>
<head>
<title>My First Webpage</title>
</head>
<body >
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td ></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
</body>
</html>
It's best practice to use CSS for the centering. You could do it like this:
<table style="text-align:center">
But you could also use HTML in each cell like this:
<td align="center">Text</td>
or like this:
<td><center>Text</center></td>
Tables aren't meant to skip cells, so different browsers will handle it differently. You won't get consistent results. Depending on what you need the blank space for, though, there are some workarounds you could use.
If you just want the cell to be empty, put a sticky space inside like this:
<td> </td>
Some browsers are confused by empty tags, but adding a sticky space (which displays as a space- you can't see it) fixes that.
If you want the cell to have no background / border, so it looks like it isn't there:
<td style="background:none; border:none">
That's embedded CSS, and I've included it because the HTML version is deprecated and you're really supposed to use CSS instead, but here's the HTML:
<td bgcolor="#000000" border=0>
You must replace #000000 with the color behind the table. If there's an image or text behind the table, you could use a transparent image as the background instead. (I wouldn't advise going to all that trouble if there's any way you can use style="background:none" instead, though.)
You could make the cell following the one you're removing span the space of both of them:
<td colspan=2>9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
Another solution is to put tables inside a table.
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td align="right"> <!-- The content is aligned to the right so that the blank space will be on the left. -->
<table width="80%"> <!-- The width of four out of five cells is 80% of the total width -->
<tr>
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
As you can see, there are a ton of different ways to approach the problem. HTML leaves a lot of room for experimentation and creativity.
jF: http://jsfiddle.net/theStudent/b9tGV/1/
I would say you will have to use some CSS, that would be the most professional way to go about doing it.
I have started you off so you can see how that works in above link, it is quite simple and there is lot of tutorials and samples online just do little research.
Sample I started you with is very plain needs more work.
best of luck I believe that is a good start
HTML
My First Webpage
<body >
<table width="80%" cellspacing="0" cellpading="0" >
<tr>
<td class="no-border"></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td class="border">9-11</td>
<td class="border">11-13</td>
<td class="border">13-15</td>
<td class="border">15-17</td>
</tr>
<tr>
<td class="border">Monday</td>
<td>6</td>
<td colspan="0" class="border">7</td>
<td rowspan ="3" class="border">Lunch</td>
<td class="border">a</td>
</tr>
<tr>
<td class="border">Tuesday</td>
<td class="border" colspan="2">< free</td>
<td class="border">s</td>
</tr>
<tr>
<td class="border">Wedensday</td>
<td class="border">a</td>
<td class="border">s</td>
<td class="border">5</td>
</tr>
</table>
</body>
</html>
CSS
.no-border{
border: none;
}
.border{
border: 1px solid #000;
text-align:center;
}
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/