How to transform asjson, asxml or an html table to a string while considering this: the string should be prepared in a way to be rendered "like a table", i. e. columns and the cells, especially nested tables with their header lines and cells, should be displayed in a well readable fashion. The string should be "built" and rendered to resemble such an HTML example (respecting also nested tables with their header lines, without borders):
<table border = "1px solid black;">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>
<p>test</p>
</td>
<td>
<table border = "1px solid black;">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>test</td>
<td>
<table border = "1px solid black;">
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I have several php generated tables like below, and I tried to add a table line on the 3rd and 4th row but I failed.
What I tried is this:
table.tbc td:nth-child(3) {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
How can I do this? I know this is an unusual table structure.
If I understand you correctly, you want to add a border between the 3rd and 4th trs. If so, the right selector is table.tbc tr:nth-child(3) td
table.tbc tr:nth-child(3) td {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
I have 2 tables in same row of the big table, like this:
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>Type A</td>
</tr>
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>10%</td>
</tr>
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>40%</td>
</tr>
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>
But when the text in first column (e.g. "Type A") is too long, it makes a new line. Then data in same row is not in same row. ("Type B" is not in same row with "90%" and "60%")
Return data is in xml format, like this:
<DataGroup Storage="Storage 1">
<DataRow Type="Type A" Percentage="10%"/>
<DataRow Type="Type B" Percentage="90%"/>
</DataGroup>
<DataGroup Storage="Storage 2">
<DataRow Type="Type A" Percentage="40%"/>
<DataRow Type="Type B" Percentage="60%"/>
</DataGroup>
I have to draw borders to make it look like one table. Render in cshtml file.
How can I resolve this? Many thanks.
You can add the border: 1px solid black; to CSS to make it like a table. For HTML, you just need one table.
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A
<br>new line</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
</table>
You can stop word-wrap with white-space: nowrap; although it stops honoring the width element.
tr td:nth-child(1){
width:20px;
color:red;
white-space: nowrap;
}
<table>
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>Type A</td>
<td>10%</td>
<td>40%</td>
</tr>
<tr>
<td>Type B</td>
<td>90%</td>
<td>60%</td>
</tr>
<table>
I'm assuming, you have a good reason for having tables within table. Then your problem is your semantics. You are not outputting the 'Type B', '90%' and '60%' on the same rows of the big table. Your sub-tables can either be aligned by vertical-align as blocks or you need to rework your big table semantics to something like this.
<table class="big">
<tr>
<td>Type</td>
<td>Storage 1</td>
<td>Storage 2</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type A Lorem ipsum</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>10%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>40%</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="small">
<tr>
<td>Type B</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>90%</td>
</tr>
</table>
</td>
<td>
<table class="small">
<tr>
<td>60%</td>
</tr>
</table>
</td>
</tr>
<table>
I want to center a <td> element in a row, when other row has many <td> elements. But the first row's <td> element always sits in the first column position, and it's not moving to center.
Here is my code sample:
<table border="1">
<tr>
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
and here is the result, I want the one element to get in center without having other element, and it should take same width and height of first column elements. Images is here -
If I am interpreting your question correctly, you don't want the <td> element to span the entire row. Instead you want it to be positioned in the "center" column.
If you know the dimensions in advance, you can simply create empty <td>s before it and hide them.
table { empty-cells: hide; }
<table border="1">
<tr>
<td></td> <!-- Empty TD for positioning -->
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
It seems you want a caption instead of a cell:
td {
border: 1px solid;
}
<table>
<caption>Problem</caption>
<tr>
<td>65</td>
<td rowspan="3" style="width: 100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
<table border="1">
<tr>
<td style="border:5px"></td>
<td>56</td>
<td style="border:5px"></td>
</tr>
<tr>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>66</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>66</td>
<td>87</td>
</tr>
</table>
if you want column then you can remove that style part
and this is the result:
<table border="1">
<tr align="center">
<td colspan="3" align="center">Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px" align="center">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td align="center">86</td>
<td>87</td>
</tr>
</table>
The amount of columns in a table are defined by the maximum amount of columns in any given row of a table. Since your table uses 3 columns, the row with only a single td cell will not fit across.
To fix this, the colspan attribute is what you want.
However, since you want to keep the cell at the size of others in the same column, you'll use empty td elements to do this. Example below:
table,
td {
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td>1 column</td>
<td></td>
</tr>
<tr>
<td>1 column</td>
<td>1 column</td>
<td>1 column</td>
</tr>
</table>
I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/
Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>
Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>
Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>
<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...
I would like to make this table layout:
I have:
<table border="1">
<tr> <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr> <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>
but how can I make rest?
LIVE: http://jsfiddle.net/jsTvA/1/
Here it is:
Code: http://jsfiddle.net/jsTvA/14/
You could create a new table in a cell.
The way to approach the problem if you want a single table is:
Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
Make a simple table grid of this size.
Start setting colspan and rowspan on tds and removing the tds next to them.
Repeat this until you have the format you like.
The best i can:
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="3">aa</td>
</tr>
<tr>
<td>a</td>
<td> aa </td>
<td> aaa </td>
<td>lol</td>
<td>
<table border="1">
<tr>
<td colspan="3">
lol
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="10">
</td>
</tr>
</table>
http://jsfiddle.net/jsTvA/15/
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="5">aa</td>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td colspan="3">aa</td>
<td rowspan="3">aa</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
<tr>
<td colspan="8">aa</td>
</tr>
</table>
To make that structure you'll need to utilise the attribute colspan and rowspan.
Example.
To Make the following structure:
-------
|A |
-------
|X|Y|Z|
-----
| |1|2|
-------
use the code:
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td rowspan="2">X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
An alternative is as a previous post suggested, to add a nested table as follows:
<tr>
<td>A</td>
</tr>
<tr>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>|</td>
</tr>
</table>
</tr>
Personally I'd opt for the colspan route, but its really up to you.
Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.
You can try merging cells in excel and then convert it into html.
http://tableizer.journalistopia.com