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?
Related
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>
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.
My question is that how can I make a row with different columns quantity ?
For example I want to have 2 columns in last row in this picture (the portion of each cell must be 50%).
Another question that I have is that how can I make text starts from first line in a cell (center cell , in this picture) ?
My code is :
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th,
td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left">
<td colspan="3">
home products contact us
</td>
</tr>
<tr>
<td width="25%">last post</td>
<td rowspan="2" width="50%">hello my name is mohammad ghorbani and i am studying computer enginerring in arak</td>
<td>our friends</td>
</tr>
<tr>
<td>our statics</td>
<td>24</td>
</tr>
<tr>
<td>our social pages</td>
<td>about us</td>
</tr>
</table>
There's two primary answer categories to your question.
First, the direct answer. Think of your page as a grid. You want enough squares on the grid to be divisible by both 3 and 2. Say, 6. Then use colspan to set each column to the number of grid columns that would be needed -- so, colspan=2 for 3 columns, and colspan=3 for 2 columns.
<table border=1>
<tr>
<td colspan=6>My Website</td>
</tr>
<tr>
<td colspan=6>home, products, contact us</td>
</tr>
<tr>
<td colspan=2 style="width:33%">last post</td>
<td colspan=2 rowspan=2 style="width:33%">hello my name</td>
<td colspan=2 style="width:33%">our friends</td>
</tr>
<tr>
<td colspan=2 style="width:33%">our statics</td>
<td colspan=2 style="width:33%">24</td>
</tr>
<tr>
<td colspan=3 style="width:50%">our social pages</td>
<td colspan=3 style="width:50%">about us</td>
</tr>
</table>
The other answer category is that you should avoid using tables for your layout structure. There's a LOT of Google results for this one, and it's very opinion based, so I'll just say that generally tables should be used for data, css for layouts, and using tables for layouts may be quicker but it's less flexible.
Try this, its working well, hope it will resolve your issue.
Add this class
.column{display:inline-block; width:49%;}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" >
home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td valign="top" rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
<tr>
<td colspan="3" valign="top">
<div class="column"> our social pages</div>
<div class="column"> about us </div>
</td>
</tr>
</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
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.