I am trying to use an asterisk.
by default they are somewhat aligned to be on top (hello*****)
I am using vertical-align:sub and its not working, i think it has to do maybe i am also using text align right?
<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>
</table>
I don't think asterisk is "aligned" to be on top. It's just a character designed that way. If you want it to be at the bottom, you can try the following.
table tr {
line-height:15px;
}
table tr td:last-child {
text-align: right;
}
table tr td:last-child span {
line-height: 0;
vertical-align: -7px;
vertical-align: sub;
}
<table cellspacing="0" style="border-spacing:0;">
<tr>
<td>C</td>
<td><span>*****</span></td>
</tr>
<tr>
<td>C+++</td>
<td><span>*****</span></td>
</tr>
<tr>
<td>Java</td>
<td><span>****</span></td>
</tr>
<tr>
<td>C#</td>
<td><span>***</span></td>
</tr>
<tr>
<td>Javascript</td>
<td><span>**</span></td>
</tr>
<tr>
<td>Python</td>
<td><span>*</span></td>
</tr>
</table>
Related
I need to make markup for creating the next table (using HTML):
task
Here is my way of making that (doesn't work):
Step 1: Making "general" markup with all cells of equal size:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
Output: Step 1
Step 2: Using "colspan" and "rowspan" for making cells 1.3 and 2.1 bigger and deleting unnecessary cells (1.4, 2.3, 2.4, 3.3 and 3.4), except one (2.2 , just for now): Step 2
Step 3: As soon as I delete cell 2.2 - big cells (1.3 and 2.1) become "smaller": Step 3 and it isn't what I need...
Here is my final markup:
td { border: solid #aaa 1px }
<table>
<thead>
<tr>
<th colspan="4">Some Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
I can't find out how to delete cell 2.2 and keep table's shape as it mentioned in the task... Appreciate any help.
Here is we Achieve the Output
table,
tr,
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
height: 30px;
width: 50px;
text-align: center;
}
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan=2>1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
You should try to this code
td {
border: 1px solid #579;
}
<table>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
You should try this
<style>td{border:1px solid black;}
tr{height:35px;}
</style>
<table>
<tbody>
<tr>
<td colspan="4">Head</td>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td colspan="2" rowspan="2">1.3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</tbody>
</table>
So I want to remove the extra spaces highlighted in red ink shown here:
http://i.stack.imgur.com/d7Kwo.png
When I remove the top images the table width becomes correct: 800px
but what I wanted is this:http://i.stack.imgur.com/XPsz2.jpg
Here is my current code:
<html>
<head><title>Adventure</title>
<link rel="stylesheet" type="text/css" href="STYLE04.css">
</head>
<body>
<table style="width:800px; height:600px" >
<tr>
<td colspan=3><img src="N13BANNER.PNG"></td>
<td><img src="N13LOGO.PNG"></td>
</tr>
<tr>
<td style="width:176px"><img src="N13BUTTON1.PNG"></td>
<td width=176><img src="N13IMG5.jpg"></td>
<td colspan=2 rowspan=6><img src="DUNE204.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON2.PNG"></td>
<td width=176><img src="N13IMG1.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON3.PNG"></td>
<td width=176><img src="N13IMG4.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON4.PNG"></td>
<td width=176><img src="N13IMG9.jpg"></td>
</tr>
<tr>
<td width=176><img src="N13BUTTON5.PNG"></td>
<td width=176><img src="N13IMG6.jpg"></td>
</tr>
<tr>
<td colspan=2><h1>Webpage last edited by asdf</h1></td>
</tr>
</table>
</body>
</html>
Code sample, with an update of your table layout without the images.
Is this how you want? ... then your images is to big, and pushes the cells too wide.
table {
width: 800px;
}
td {
background-color: gray;
width: 20%;
height: 85px;
}
tr:last-child td {
height: 40px;
}
img {
vertical-align: top;
}
<table>
<tr>
<td colspan=4></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan=3 rowspan=6></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>mail</td>
<td>mail</td>
</tr>
<tr>
<td colspan=2>Webpage last edited by asdf</td>
</tr>
</table>
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I want to show the below layout using html tables.
foo : jack
products : bag
bat
ball
shoes
blah : olah
I tried this but its not working as my expectations.
<table border="1">
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
<tr>
<th>row 1</th>
<td>
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
</td>
</tr>
<tr>
<th>row 1</th>
<td> Hello</td>
</tr>
</table>
Does this have to be a table? It seems that something like a definition list might be more appropriate to your usage, so I'd suggest the following as an option:
HTML:
<dl>
<dt>Foo:</dt>
<dd>Jack</dd>
<dt>Products:</dt>
<dd>Bag</dd>
<dd>Bat</dd>
<dd>Ball</dd>
<dd>Shoes</dd>
<dt>Blah:</dt>
<dd>Olah</dd>
</dl>
CSS:
dl {
width: 50%;
margin: 0 auto;
}
dt, dd {
font-size: 1em;
line-height: 1.2em;
}
dt {
width: 49%;
display: inline-block;
margin-top: 0.2em;
}
dd {
width: 49%;
display: block;
margin-left: 51%;
}
dt + dd {
display: inline-block;
margin-left: 0;
margin-top: 0.2em;
position: relative;
}
dt + dd:before {
content: " : ";
position: absolute;
left: -1em;
}
And the JS Fiddle demo.
Well this can be achieved by using rowspan
I think the problem is that, in your embedded table...
<table>
<tr>foo1</tr>
<tr>foo2</tr>
</table>
...you forgot to also wrap them in <td> elements:
<table>
<tr><td>foo1</td></tr>
<tr><td>foo2</td></tr>
</table>
But then, of course, you have the problem where the corresponding <th> is aligned in the middle of the table cell, instead of the top. But that can be fixed with the valign property:
<th valign="top">row 1</th>
<table>
<tr>
<td>foo</td><td>:</td><td>jack</td>
</tr>
<tr>
<td>products</td><td>:</td><td>bag</td>
</tr>
<tr>
<td><td/><td>bat</td>
</tr>
<tr>
<td><td/><td>ball</td>
</tr>
<tr>
<td><td/><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
Produces:
The key is that the colons are in a column of their own.
You can handle it using many way, but i just create it in quick way.
http://jsfiddle.net/dXU8D/
<table width="300" border="1">
<tr>
<td width="88">foo : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99">products : </td>
<td><table width="200" border="1">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td height="59">4</td>
</tr>
</table></td>
</tr>
<tr>
<td height="23">blah : </td>
<td>olah</td>
</tr>
</table>
Or you can use rowspan to achieve this.
http://jsfiddle.net/Mzyzx/
<table width="300" border="1">
<tr>
<td width="88">foo : </td>
<td width="196">jack</td>
</tr>
<tr>
<td height="99" rowspan="5">products : </td>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td height="23">blah :</td>
<td>olah</td>
</tr>
</table>
<table>
<tr>
<td style="width: 70%;">foo</td><td style="width: 10%;">:</td><td style="width: 20%;">jack</td>
</tr>
<tr>
<td>products </td><td>:</td><td>bag</td>
</tr>
<tr>
<td colspan="2"> </td><td>bat</td>
</tr>
<tr>
<td colspan="2"> </td><td>ball</td>
</tr>
<tr>
<td colspan="2"> </td><td>shoes</td>
</tr>
<tr>
<td>blah</td><td>:</td><td>olah</td>
</tr>
</table>
one more example to be complete. http://jsfiddle.net/2ufsD/