I have the following code:
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;">x</td>
<td style="width: 50%; height: 18px;">y</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
which produces the following table:
How can I merge my "x" and "y" cells so that the row they're in consists of only one cell "xy"?
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr style="height: 126px;">
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
<td style="width: 50%; height: 126px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
<tr style="height: 108px;">
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
<td style="width: 50%; height: 108px;"><strong>abc</strong></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px;" colspan="2">xy</td>
</tr>
</tbody>
</table>
Colspan is what you seek. Also dunno if someone told you but inline css is bad practice you should use class instead
Here you have the code with class instead of inline css : (same result but prettier)
.bigRow {
height: 126px;
}
.bigRow-2 {
height: 108px;
}
.bigRow td, .bigRow-2 td {
height: 100%;
width: 50%;
}
.smallRow {
height: 18px;
}
<div style="text-align: center; color: #345; padding-top: 10px;">
<table style="border-collapse: collapse; width: 100%; height: 270px;" border="1">
<tbody>
<tr class="bigRow">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
<tr class="bigRow-2">
<td><strong>abc</strong></td>
<td><strong>abc</strong></td>
</tr>
<tr class="smallRow">
<td colspan="2">xy</td>
</tr>
</tbody>
</table>
<p> </p>
</div>
Related
I want to create a table with stuff in it like this:
What I have right now:
<table class="table">
<td>
<tr>
<div style="width: 100px;height:100px; background-color: blue;"></div>
</tr>
<tr>
<div style="width: 100px;height:100px; background-color: red;"></div>
</tr>
</td>
<td>
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</table>
Use rowspan, and td cannot be direct child of a table.
table {
border-collapse: collapse;
}
td {
width: 100px;
text-align: center;
vertical-align: middle;
}
.blue {
background-color: royalblue;
height: 100px;
}
.yellow {
background-color: yellow;
height: 200px;
}
.red {
background-color: red;
height: 100px;
}
<table>
<tr>
<td class="blue">1</td>
<td class="yellow" rowspan="2">3</td>
</tr>
<tr>
<td class="red">2</td>
</tr>
</table>
Well, firstly, your table syntax is off. It should look like this.
<table>
<tr>
<td> </td>
</tr>
</table>
Next, what you want is the first row to have two columns, with the second column taking up the space of two rows. The next row will have one column. This can be done using rowspan.
Here's your refactored code.
<table class="table">
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: blue;"></div>
</td>
<td rowspan="2">
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</tr>
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: red;"></div>
</td>
</tr>
</table>
Your code must like this: use rowspan for second td
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px;height:100px; background-color: blue;"></td>
<td rowspan="2" style="width: 100px;height:200px; background-color: yellow;"></td>
</tr>
<tr>
<td style="width: 100px;height:100px; background-color: red;"></td>
</tr>
</table>
</tr>
</table>
I am starting to learn HTML. In a table I created I use rowspan, but when I insert an image in a column that is expanded the image seems to not expand in the whole cell. So the rows of the table start to have different heights.
This happens in EDGE and IE but not in OPERA,Firefox etc as is shown in the images below. Column heights are not consistent there too.
Ideally, I would like to have the following heights (assuming fixed row height) for the cells identified by their content:
Headers 1 and 2: 1 column
Headers 3 and 4: 2 columns
Left image height: 4 columns
Right image height: 6 columns
body{
background-color:#FFFF99
}
img {
height: 70px;
display:block;
}
h1{
font-style: italic;
color:#3300CC;
}
table, th, td {
border: 1px solid black;
border-spacing:3px;
}
table {
width: 75%;
}
th {
padding:4px;
text-align:right;
}
td{
padding:4px;
}
.Tablestyle1{
background-color: #00CC66;
text-align: center
}
<h1>TITLE </h1>
<table>
<tr class="Tablestyle1" > <!--First Row-->
<td>A</td>
<td colspan="4">B</td>
</tr>
<tr>
<td class="Tablestyle1"rowspan="2">C</td>
<th>Header1</th>
<td> D</td>
<td rowspan="6"> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt1" >
<td rowspan="6">
<ol type="I">
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ol>
</tr>
<tr>
<th>Header2</th>
<td>F</td>
</tr>
<tr>
<td rowspan="4">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt2" >
</td>
<th rowspan="2">Header3</th>
<td rowspan="2">H</td>
</tr>
<tr></tr>
<tr>
<th rowspan="2">Header4</th>
<td rowspan="2">L</td>
</tr>
<tr></tr>
<tr>
<td colspan="5">
Link1
</td>
</tr>
</table>
Here is a stripped down example with inline css to explain how to style each element. The colspans and rowspans is also simplified.
This is a fixed height solution. If you want the height to be adjusted to the content, you might need some jQuery magic. Flexbox and tables won't work cross browser I think.
<table style="border-collapse: collapse; width: 75%; height: 216px;" border="1">
<tbody>
<tr style="height: 36px;">
<td style="width: 30%; height: 36px;">A</td>
<td style="width: 70%; height: 36px;" colspan="4">B</td>
</tr>
<tr style="height: 36px;">
<td style="width: 30%; height: 72px;" rowspan="2">C</td>
<td style="width: 15%; height: 36px;">1</td>
<td style="width: 10%; height: 36px;">D</td>
<td style="width: 20%; height: 144px;" rowspan="4">Image</td>
<td style="width: 25%; height: 144px;" rowspan="4">List</td>
</tr>
<tr style="height: 36px;">
<td style="width: 15%; height: 36px;">2</td>
<td style="width: 10%; height: 36px;">F</td>
</tr>
<tr style="height: 36px;">
<td style="width: 30%; height: 72px;" rowspan="2">Image</td>
<td style="width: 15%; height: 36px;">3</td>
<td style="width: 10%; height: 36px;">H</td>
</tr>
<tr style="height: 36px;">
<td style="width: 15%; height: 36px;">4</td>
<td style="width: 10%; height: 36px;">L</td>
</tr>
<tr style="height: 36px;">
<td style="width: 100%; height: 36px;" colspan="5">Link</td>
</tr>
</tbody>
</table>
If the content is too big the table could still be distorted – unless you use overflow:hidden https://stackoverflow.com/a/509825/762640
For the height, you can set height to all td's
Another option (also for the width) you can set class for every cell you want, and define the css rules for it.
You can see the example here.
https://jsfiddle.net/5upeywrd/2/
I did the rule for the header cell "A".
I want to
1. adjust first column width according to largest length(it will be varying) of td element consisting it.
2. Want to set fixed width for other columns so that its content will be fit into one row (i.e. no wrapping).
Any help will be appreciated.
<head>
<style type="text/css">
table {
table-layout: auto;
border-collapse: collapse;
width: 100%;
}
table td {
border: 2px solid green;
}
.style2
{
height: 23px;
<!--width: 100%;-->
<!-- width: 500px;-->
}
.style3
{
height: 23px;
width: 30px;
<!-- width: 92px;-->
font-size: xx-small;
}
.style4
{
height: 23px;
<!-- width: 109px;-->
font-size: xx-small;
background-color: #CCCCCC;
}
.style5
{
width: 30%;
height: 30px;
}
.style6
{
border-style: solid;
border-width: 1px;
padding: 1px 4px;
}
.style7
{
background-color: #CCCCCC;
}
.style8
{
height: 23px;
<!-- width: 109px;-->
background-color: #999999;
}
.style9
{
background-color: #999999;
}
.style10
{
height: 23px;
<!-- width: 92px; -->
background-color: #999999;
}
.style13
{
height: 23px;
<!-- width: 92px;-->
font-size: xx-small;
background-color: #FFCCFF;
}
.style14
{
font-size: xx-small;
background-color: #CCFF66;
}
.style18
{
font-size: xx-small;
background-color: #CCCCCC;
}
.style19
{
height: 23px;
width: 100%;
<!-- width: 289px;-->
font-size: small;
}.
}
</style>
</head>
<table style="height: 75px;" border="1">
<tbody>
<tr style="height: 23px;">
<td style="height: 23px;" colspan="10"> <strong> AW Build</strong></td>
</tr>
<tr style="height: 23px;">
<th class="style2"> Teams</th>
<td style="height: 23px;" colspan="3" class="style7"> 0512</td>
<td style="height: 23px;" colspan="3" class="style7"> 0511</td>
<td style="height: 23px;" colspan="3" class="style7"> 0512</td>
</tr>
<tr style="height: 23px;">
<td class="style19">AW-Consumer Packaged Good</td>
<td style="height: 23px;" class="style9"> TC1121</td>
<td class="style10">TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9"> TC1121</td>
<td style="height: 23px;" class="style9"> TC1122</td>
<td style="height: 23px;" class="style9">TC113</td>
<td style="height: 23px;" class="style9">TC1121</td>
<td style="height: 23px;" class="style9">TC1122</td>
<td class="style8">TC113</td>
</tr>
<tr style="height: 23px;">
<td class="style19">AW-User Management</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td class="style13">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style12">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td style="height: 23px;" class="style18">P-85 NAF-12 FF-3</td>
<td class="style4">P-85 NAF-12 FF-3</td>
</tr>
<tr style="height: 23px;">
<td class="style19">Active Content Experience</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
<tr style="height: 23px;">
<td class="style19">Audit Subscription and License</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td class="style15">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style14">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-93 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td style="height: 23px;" class="style18">P-85 NAF-0 FF-7</td>
<td class="style4">P-85 NAF-0 FF-7</td>
</tr>
</tbody>
</table>
<p>
<br />
</p>
So i am using aside html5 semantic to make columns.
I wanna have them on the left and right
So i just use class to use float:right to have them in opposite of each other.
but for some odd reason i cannot understnd, its not working in the last one.???
p.s I am new to html or coding in general. don't mind the aesthetics of the codes.
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"></div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>
Replace your :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
with this one :
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
clear:right;
}
PS:
- I added the clear: right; line
- After each float:right, you have to reset the floating element, by using clear: right, so the next element which positioned below will be drawn from the left, just the same as the above elements
Try like this: Demo
Use this
aside.left{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure should be like this:
<aside class="left">...</aside>
instead of
aside{
width: 120px;
height: 150px;
border: 3px solid black;
margin-top: 15px;
margin-bottom: 5px;
}
HTML Structure:
<aside>...</aside>
you can shift left and right aside block with this css,
Please use this css-
aside.right { clear: both; }
aside { float: left; }
Remove margin-bottom:15px from aside tag
#wrapper{
width: 900px;
height: 800px;
margin-left: auto;
margin-right: auto;
font-family: khand,sans-serif;
font-weight: bold;
}
#socialmedia1 {
background-image: url(tw.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin:38px 10px 0px 0px;
}
#socialmedia2 {
background-image: url(fb.png);
background-size: 20px 20px;
width: 20px;
height: 20px;
float: right;
margin: 38px 10px 0px 0px;
}
#socialmedia3 {
background-image: url(insta.png);
background-size: 30px 30px;
width: 30px;
height: 30px;
float: right;
margin: 30px 10px 0px 0px;
}
header{
width: 800px;
height: 70px;
border: 3px solid black;
bottom: 20px;
position: relative; /* Had to move this to the bottom
to make space for icons*/
bottom: -40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
hr{
height: 0px;
padding: 0px;
margin: 2px;
}
.logo{
background-image :url(logo.png);
background-size: 140px 140px;
width: 140px;
height:140px;
position:relative;
bottom: 35px;
left: 20px;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
width: 450px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 20px;
}
li a {
display: block;
color: black;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #911111;
}
li {
float: left;
}
aside{
width: 120px; /*logo overlaps gotta use position relative..EDIT Nevermind i could*
just add margin to make space without fucking erthing up*/
height: 150px;
border: 3px solid black;
/*margin-top: 15px; */
margin-bottom: 15px;
}
aside.right{
width: 120px;
height: 150px;
border: 3px solid black;
float: right;
}
.titlebannerbox{
width: 120px;
height: 25px;
background-color: #911111;
position: relative;
bottom: 17px;
color: white;
}
.asidelogo{
width: 27px;
height: 27px;
background-size: 27px 27px;
background-image: url(titlebannerlogo.png);
position: relative;
bottom: 60px;
margin-bottom: -65px;
}
footer {
width: 800px;
height: 70px;
border: 3px solid black;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<link href='https://fonts.googleapis.com/css?family=Khand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet"href="style.css">
<style>
</style>
</head>
<body>
<div id="wrapper">
<header>
<div class="logo"></div>
</header>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Learned</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">HTML</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>CSS</td>
<td style="text-align: right">60%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">0.001%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>PhP</td>
<td style="text-align: right">0%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">0%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside style="color:black">
<p class="titlebannerbox" align="right">Popularity</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5;">
<tr style="line-height: 15px;">
<td style="width: 10%">Python</td>
<td style="text-align: right">31.2%</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">19.6%</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">9.8%</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right">7.4%</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right">7.1%</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">6.5%</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">6.1%</td>
</tr>
</table>
</aside>
<aside class="right">
<p class="titlebannerbox" align="right">Salary</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:-5px;">
<tr style="line-height: 15px;">
<td style="width: 10%">Ruby</td>
<td style="text-align: right">$109k</td>
</tr>
<tr style="line-height: 15px;">
<td>Object C</td>
<td style="text-align: right">$108k</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align: right">$100k</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">$94k</td>
</tr>
<tr style="line-height: 15px;">
<td>C++</td>
<td style="text-align: right">$93k</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right;">$91k</td>
</tr>
<tr style="line-height: 15px;">
<td>C</td>
<td style="text-align: right;">$90k</td>
</tr>
</table>
</aside>
<aside>
<p class="titlebannerbox" align="right">Difficulty</p>
<p class="asidelogo"></p>
<hr>
<table cellspacing="0" style="border-spacing:0;">
<tr style="line-height: 15px;">
<td style="width: 30%;">C</td>
<td style="text-align: right;vertical-align: sub;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>C+++</td>
<td style="text-align: right;">*****</td>
</tr>
<tr style="line-height: 15px;">
<td>Java</td>
<td style="text-align: right">****</td>
</tr>
<tr style="line-height: 15px;">
<td>C#</td>
<td style="text-align: right;">***</td>
</tr>
<tr style="line-height: 15px;">
<td>Javascript</td>
<td style="text-align: right">**</td>
</tr>
<tr style="line-height: 15px;">
<td>Python</td>
<td style="text-align:right;">*</td>
</tr>
<tr style="line-height: 15px;">
<td>Ruby</td>
<td style="text-align: right;">*</td>
</tr>
</table>
</aside>
</div> <!-- End of Wrapper-->
</body>
</html>
I am trying to get internet explorer to display an image in a table cell correctly. The image will display perfectly fine in chrome, but internet explorer keeps inserting white space above the image. Is there anything else that I can add which will prevent internet explorer from incorrectly displaying the image/table cell? I am trying to get the image to fill up the cell without any white space being the sides of it.
Code that I am using:
<p> </p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;">
<tbody>
<tr>
<td class="ms-rteTable-default" style="width: 292px;"></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
</tr>
<tr>
<td class="ms-rteTable-default" style="width: 292px; height: 186px;"><img src="/Test%20Pics%20Library/map_gif.gif" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; vertical-align: top;"/> </td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
</tr>
</tbody>
</table>
<p></p>
<br/>
<br/>
<br/>
<br/>
Internet explorer view:
Chrome view:
i think you copied this code from somewhere....
there is some special character between <td></td>
if you write the code again space will not come or copy this code
<p> </p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;" >
<tbody>
<tr>
<td class="ms-rteTable-default" style="width:292px;"></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
</tr>
<tr><td class="ms-rteTable-default" style="width:292px;height: 186px;"><img src="SVoice_im.jpeg" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; vertical-align: top;"></td></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
<td class="ms-rteTable-default" style="width:33.33%;"></td>
</tr>
</tbody>
</table>
<p></p>
<br/>
<br/>
<br/>
<br/>
<p> </p>
<table cellspacing="0" cellpadding="0" style="width: 100%; height: 232px;">
<tbody>
<tr>
<td class="ms-rteTable-default" style="width: 292px;"></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
</tr>
<tr>
<td class="ms-rteTable-default" style="width: 292px; height: 186px; vertical-align: top; position: relative;"><img src="/Test%20Pics%20Library/map_gif.gif" alt="" style="width: 100%; height: 100%; margin-right: auto; margin-left: auto; display: block;"/></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
<td class="ms-rteTable-default" style="width: 33.33%;"></td>
</tr>
</tbody>
</table>
<p></p>
<br/>
<br/>
<br/>
<br/>
Did you try this?