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>
Related
How do i give a border to the <tr>(t_border).
The inner table shouldnt inherit the style from the outer one
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</tbody>
You can try as per my code:
<style>
table{
border-collapse: collapse;
}
table.t_border tr{
border:solid 1px red;
}
</style>
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td><td>B</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Hope it might help you!
you can set separate style for the class .t_border, see example code..
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</table></td></tr></table>
<style>
.t_border
{
border: 1px solid red;
}
</style>
just give style of tr tag
<tr>
<td style="border : 1px solid black">B</td>
</tr>
If you need to style your border, you may use other answers.
But if you only need to use the pure HTML table style, you can use this :
<table border=1> to give border on your table inside table.
You can't add a border to a <tr>. You would have to add it to the <td>s. Also your t_border table isn't be being closed </table> and your outer table should be closed with </table> instead of </tbody>.
Just giving the border to the tr won't really have an effect. It would be better to give the td's a border top or bottom of what you want it to actually show up. For example, border-bottom:2px solid black;
I'm trying to multiplication table in html, but it requires only a border below the top row and to the right of the left row. Everything within the table will not be separated by borders. However, I feel stumped because I think you cannot do this, is it even possible to only add a border to one cell?
edit: dear freinds i have discovered an image from the internet that demonstrates what I am trying to achieve. http://i.stack.imgur.com/y364h.jpg For my table, is it possible to only have borders corresponding to the bold border from the image within my html table?
You need to work with CSS. Here is a sample I am providing
<html>
<head>
<title>Border-Test</title>
<style>
.border-side {
border-right: 1px solid black;
}
.border-bottom td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0">
<thead>
<tr><td colspan="5">Addition</td></tr>
</thead>
<tbody>
<tr class="border-bottom">
<td class="border-side"> </td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">0</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">1</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">2</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">3</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of above
NOTE : You need to change the table cell data which I haven't changed.
NOTE : You also must need to specify the cellspacing="0".
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 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.
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/