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/
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>
Is it possible to merge two cells vertically and keep the text in Outlook 2016?
1.
2.Click merge cells
Text disappears
Alternatively, it appears impossible to get this table to appear correctly in an email (in notepad++, choose Run/Send via Outlook), however when viewed in a browser, it appears fine.
<html>
<table class="tg" border="1">
<tr>
<th class="tg-yw4l">Type</th>
<th class="tg-yw4l">Power</th>
<th class="tg-yw4l">Torque</th>
</tr>
<tr>
<td class="tg-yw4l" rowspan="2">Car</td>
<td class="tg-yw4l">120hp</td>
<td class="tg-yw4l">100nm</td>
</tr>
<tr>
<td class="tg-yw4l" colspan="2">Has 4 wheels<br></td>
</tr>
</table>
</html>
Finally, I understand as of Outlook 2007, it uses Word (!) to render html, not Internet Explorer. However when viewing this html in word, the title "Car" appears, but not in outlook.
EDIT: I just rebooted and let office install its updates and now the original emails and table merge work properly.
Here is one way to achieve this. Removing the col spans and rowspans you will need to resort to more tables but you can be sure it will render the same across all devices.
<table class="tg" border="1">
<tr>
<th class="tg-yw4l">Type</th>
<th class="tg-yw4l">
<table border="1">
<tr>
<th>Power</th><th>Torque</th>
</tr>
</table>
</th>
</tr>
<tr>
<td class="tg-yw4l" align="center" valign="middle">
<table class="tg" border="1">
<tr>
<td align="center" valign="middle">Car</td>
</tr>
</table>
</td>
<td>
<table border="1">
<tr>
<td>120hp</td><td>100nm</td>
</tr>
</table>
<table class="tg" border="1">
<tr>
<td class="tg-yw4l">Has 4 wheels<br></td>
</tr>
</table>
</td>
</tr>
</table>
Hope this is what you were after.
Cheers
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 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;
}