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>
Related
I am new to HTML tables. I have a table as shown below. Is it possible to align the left of the value6 in the second tr to the left of the cell containing value3, which the third cell in the previous row? I tried style="padding-left:185px" as fixed padding, but it didn't give the desired result, especially in a responsive page design.
<table>
<tbody>
<tr>
<td class="form_label">value1</td>
<td class=" form_label">value2</td>
<td class="form_label">value3</td>
<td class=" form_label">value4</td>
<td class="form_label">value5</td>
</tr>
<tr>
<td colspan=" 5 " class="form_label " style="padding-left:185px ">value6</td>
</tr>
</tbody>
That might not be possible using css because of diverse size of devices. However, if you would be ok with splitting the second row into 2 cols, it might work. Try this code.
And also, you are missing the closing quote mark in your classes in all td in first row.
<table>
<tbody>
<tr>
<td class="form_label">value1</td>
<td class="form_label">value2</td>
<td class="form_label">value3</td>
<td class="form_label">value4</td>
<td class="form_label">value5</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3" class="form_label">value6</td>
</tr>
</tbody>
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>
So I am trying to split cells in a table using colspan but I am seeing some odd behavior. In the code bellow the first table does not render as expected.
In particular the row with the 1/4 and 1/2 column are not spanning to 2x25% occupancy and then one that uses the remainder space, and this messes up the proper spanning of the 1/3 cells and 1/2 cells... On the other the second table looks as expected.
I am not sure if this is a bug in Chrome?? it seems to have also hill behavior in IE9, am i missing something here? Is there a better method to get this done?
You can see live version of code at: https://jsfiddle.net/4xwm33n6/
Unexpected alignment:
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="50%" align="center">1/2</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
This works (but two 1/4 cannot be merged as one):
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
To do what you want to do you need something along the lines of:
<table>
<tr>
<td colspan="12">1/1</td>
</tr>
<tr>
<td colspan="6">1/2</td>
<td colspan="6">1/2</td>
</tr>
<tr>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
</tr>
<tr>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
</tr>
</table>
This way you can combine the number of cells you need. By the way I got the 12 by using the lowest common multiple of 4 and 3...
Sorry for wrote comment like answer, I can't comment this post :(
colspan mean how many cells You want to merge, not width. You can't set width in colspan.
You should use colspan="#" using a number not a percent.
For example, if you want a td to go across two columns, use colspan="2"
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
</table>
https://jsfiddle.net/xxurc50n/1/
I want to layout my table TDs like the image below.
I tried a few ways and tried looking up how, but I couldn't get my hands on much. This is the code I have currently. It doesn't work and makes it look like a normal table with all the TDs aligned horizontally. Any tip or clue would be wonderful!
<table>
<td rowspan="2" colspan="1">td1</td>
<td rowspan="1" colspan="2">td2</td>
<td rowspan="1" colspan="2">td3</td>
</table>
<table border="1">
<tr>
<td rowspan="2">td1</td>
<td>td2</td>
</tr>
<tr>
<td>td3</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/oou92y33/
i want to;
1.remove a small part of this table and make a free space there.i comennted it on the code.
2.also to center the words in the table.
CAN ANY ONE HELP ME PLEASE?(Please use only HTML not css or javascript)
<html>
<head>
<title>My First Webpage</title>
</head>
<body >
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td ></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
</body>
</html>
It's best practice to use CSS for the centering. You could do it like this:
<table style="text-align:center">
But you could also use HTML in each cell like this:
<td align="center">Text</td>
or like this:
<td><center>Text</center></td>
Tables aren't meant to skip cells, so different browsers will handle it differently. You won't get consistent results. Depending on what you need the blank space for, though, there are some workarounds you could use.
If you just want the cell to be empty, put a sticky space inside like this:
<td> </td>
Some browsers are confused by empty tags, but adding a sticky space (which displays as a space- you can't see it) fixes that.
If you want the cell to have no background / border, so it looks like it isn't there:
<td style="background:none; border:none">
That's embedded CSS, and I've included it because the HTML version is deprecated and you're really supposed to use CSS instead, but here's the HTML:
<td bgcolor="#000000" border=0>
You must replace #000000 with the color behind the table. If there's an image or text behind the table, you could use a transparent image as the background instead. (I wouldn't advise going to all that trouble if there's any way you can use style="background:none" instead, though.)
You could make the cell following the one you're removing span the space of both of them:
<td colspan=2>9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
Another solution is to put tables inside a table.
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td align="right"> <!-- The content is aligned to the right so that the blank space will be on the left. -->
<table width="80%"> <!-- The width of four out of five cells is 80% of the total width -->
<tr>
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
As you can see, there are a ton of different ways to approach the problem. HTML leaves a lot of room for experimentation and creativity.
jF: http://jsfiddle.net/theStudent/b9tGV/1/
I would say you will have to use some CSS, that would be the most professional way to go about doing it.
I have started you off so you can see how that works in above link, it is quite simple and there is lot of tutorials and samples online just do little research.
Sample I started you with is very plain needs more work.
best of luck I believe that is a good start
HTML
My First Webpage
<body >
<table width="80%" cellspacing="0" cellpading="0" >
<tr>
<td class="no-border"></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td class="border">9-11</td>
<td class="border">11-13</td>
<td class="border">13-15</td>
<td class="border">15-17</td>
</tr>
<tr>
<td class="border">Monday</td>
<td>6</td>
<td colspan="0" class="border">7</td>
<td rowspan ="3" class="border">Lunch</td>
<td class="border">a</td>
</tr>
<tr>
<td class="border">Tuesday</td>
<td class="border" colspan="2">< free</td>
<td class="border">s</td>
</tr>
<tr>
<td class="border">Wedensday</td>
<td class="border">a</td>
<td class="border">s</td>
<td class="border">5</td>
</tr>
</table>
</body>
</html>
CSS
.no-border{
border: none;
}
.border{
border: 1px solid #000;
text-align:center;
}