I was trying to align my text in my table and I'm wondering how do this.
My code:
<table class="n">
<tbody>
<tr>
<td style="text-align:center"><strong>TITLE</strong></td>
<td style="text-align:center"><strong>TITLE</strong></td>
</tr>
<tr>
<td style="text-align:center">A</td>
<td style="text-align:center"><strong>MESSAGE TEST</strong></td>
</tr>
<tr class="alt">
<td style="text-align:center">C</td>
<td style="text-align:center"><strong>message test lasdadlong</strong></td>
</tr
Fiddle
is there anyway of edit the text so everything start at the same line ?
Desired output:
<center><table class="n">
<tbody>
<tr>
<td style="text-align:center"><strong>TITLE</strong></td>
</tr>
<tr>
<td style="text-align:center"><strong>MESSAGE TEST</strong></td>
</tr>
<tr class="alt">
<td style="text-align:center"><strong>message test lasdadlong</strong></td>
</tr></center>
I have edited your code as your mentioned image, Post again edited to stable table on center. Hope it works for you.
Related
Example
This is a "T-account" as shown in the book Principles of Macroeconomics by Gregory Mankiw:
Code
To render this, I took the approach of using nested tables:
<table class="table">
<thead>
<tr>
<th>ASSETS</th>
<th>LIABILITIES AND OWNERS' EQUITY</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Reserves</td>
<td style="text-align: right;">200</td>
</tr>
<tr>
<td>Loans</td>
<td style="text-align: right;">700</td>
</tr>
<tr>
<td>Securities</td>
<td style="text-align: right;">100</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Deposits</td>
<td style="text-align: right;">800</td>
</tr>
<tr>
<td>Debt</td>
<td style="text-align: right;">150</td>
</tr>
<tr>
<td>Capital</td>
<td style="text-align: right;">50</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
In my application (with some CSS that comes with Blazor) here's the result:
Question
This seems to work OK, although it seems a bit odd. There's the assumption that the rows in each table will always align, for example.
Is there a better or more idiomatic way to implement the T-account in HTML?
I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>
Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
Here I have a JSON data as below:
[
{"teacher":"Tom","student":[{"name":"stuA","project":"projectA"},{"name":"stuB","project":"projectB"}]},
{"teacher":"Jerry","student":[{"name":"stuC","project":"projectC"},{"name":"stuD","project":"projectD"},{"name":"stuE","project":"projectE"}]},
{"teacher":"Lee","student":[{"name":"stuF","project":"projectF"}]}
]
And now I want to render it into an irregular table like the picture:
So how can I make it possible by using ng-repeat? It's really a confusing problem.
Here is the html code that makes the table above:
<tr style="height:40px" >
<td rowspan="2" style="text-align:center;background:#FFD4D4;font-weight:bold;">Tom</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuA</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectA</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuB</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectB</td>
</tr>
<tr style="height:40px">
<td rowspan="3" style="text-align:center;background:#FFD4D4;font-weight:bold;">Jerry</td>
<td style="text-align:center;font-size:15px;font-weight:bold;">stuC</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectC</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuD</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectD</td>
</tr>
<tr style="height:40px;">
<td style="text-align:center;font-size:15px;font-weight:bold;">stuE</td>
<td style="text-align:left;padding-left:100px;font-size:15px;font-weight:bold;">projectE</td>
</tr>
I'd suggest you to take use of tbody tag so that we need to apply to ng-repeat tag twice, that would do the trick for you.
Makrup
<table class="table table-bordered">
<thead></thead>
<tbody ng-repeat="teacher in teachers">
<tr ng-repeat="student in teacher.student">
<td ng-if="$first" rowspan="{{teacher.student.length}}">{{teacher.teacher}}</td>
<td>{{student.name}}</td>
<td>{{student.project}}</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Demo Plunkr
ng-repeat with tables/table rows can be a bit tricky. Tried to get it done, looks a bit ugly but it does the work:
<tr ng-repeat-start="group in data">
<td ng-bind="group.teacher" rowspan="{{group.student.length}}"></td>
<td ng-bind="group.student[0].name"></td>
<td ng-bind="group.student[0].project"></td>
</tr>
<tr ng-repeat="student in group.student | limitTo : group.student.length - 1 : 1">
<td ng-bind="student.name"></td>
<td ng-bind="student.project"></td>
</tr>
<tr ng-repeat-end></tr>
Plunker: http://plnkr.co/edit/yUPEGdofvwMipcX7CpDK?p=preview
Having some trouble figuring out what the grid is like for using colspan, so that I can evenly align my items.
HTML
<table class="table MethodList" ng-repeat="method in api.methods">
<tr>
<td colspan=4 style="font-weight:bold">{{method.name}}</td>
<td colspan=8>{{method.desc}}</td>
<tr>
<td colspan=4></td>
<td colspan=8 style="background:#E6E6DA">{{method.parameters}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8>{{method.additional}}</td>
</tr>
</tr>
</table>
What this does
As you can see, the following texts are pushed back each row further and I do not know why. I am trying to just keep the initial value (index, create, confirm, choose) as the only item in colspan=4, then everything else to be after that.
I also have bootstrap included in case they use some nice template.
It looks like you have a misplaced closing tr tag </tr> at the end of your table.
Please fix it and check again to see if the layout is displayed correctly
Your code should became something like this:
<table class="table MethodList" ng-repeat="method in api.methods">
<tr>
<td colspan=4 style="font-weight:bold">{{method.name}}</td>
<td colspan=8>{{method.desc}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8 style="background:#E6E6DA">{{method.parameters}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8>{{method.additional}}</td>
</tr>
</table>
I'm having this little table of mine, which doesn't seem to work. The CSS will tell all about what height and width I want. Do I do this in a wrong way or what am I missing in this?
And why aren't all the borders aligned?
The table, html and CSS can be seen in this jsfiddle:
http://jsfiddle.net/YaKCT/
<table class="stamtavle">
<tr>
<td rowspan=7 class="cell1"><p>Volstrups Casillas</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Colman</p></td>
</tr>
<tr>
<td class="cell3"><p>Carthago Z</p></td>
</tr>
<tr>
<td class="cell3"><p>Rosenquarz</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Lucille</p></td>
</tr>
<tr>
<td class="cell3"><p>Lordship</p></td>
</tr>
<tr>
<td class="cell3"><p>Carna</p></td>
</tr>
<tr>
<td rowspan=7 class="cell1"><p>Volstrups Corona</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Churchill</p></td>
</tr>
<tr>
<td class="cell2"><p>Cicero</p></td>
</tr>
<tr>
<td class="cell3"><p>Ziska</p></td>
</tr>
<tr>
<td rowspan=3 class="cell2"><p>Volstrups Cartia</p></td>
</tr>
<tr>
<td class="cell3"><p>Calato Z</p></td>
</tr>
<tr>
<td class="cell3"><p>Sidsel</p></td>
</tr>
</table>
Add this to your table tag
class="stamtavle" cellpadding="0" cellspacing="0"
I think you'd need a different approach to make the spacing between cells work how it was before due to your rowspan layout. This does neaten everything up though.