I've been using bootstrap for a while now but I can't do this thing (I don't even know how to do it without Bootstrap).
What I want to is is indent either a table or divs. I've seen something like this done in Bootstrap with <li> but nothing with tables. Basically I want a table with the <th> which is the title and below the names of the projects. The reason I need to indent is because the projects depend on other projects; so the project below anoher project has to be possitioned slightly to the right of its parent (which is basically indenting, right?)
Here are a couple options if what you need is a small indentation to suggest a hierarchy. They're not specific to Bootstrap tables.
The first is to add a couple nonbreaking spaces per level of indent that you want. This has the advantage that the spaces can be added by whatever code is producing the table content without disturbing the html of the table. It has the disadvantage that if the text wraps within the cell the wrapped lines will not be indented. Also, all those invisible nonbreaking spaces can lead to copy/paste surprises.
<td> Indented Text</td>
<td> Indented More</td>
If your code is emitting the html of the table, a better solution is to change the padding of the table cell by increasing amounts. It has the advantage of finer control than increments of nonbreaking space, and wrapped text is also indented. The disadvantage here is you're emitting html from code and that may make it more difficult to adjust the layout.
<td style="padding-left:20px">Indented Text</td>
<td style="padding-left:40px">Indented More</td>
Could this be solved using offsets? It's somewhat difficult to help when we dont know the situation or how the markup is looking.
The offset* class will add a margin-left to your element. Maybe that will help you?
Related
I have read some answers and document. They presented about how to formatting & Indenting HTML. But I can't find any answers tell me how to indent many level html tags. I wrote an email template using table layout, it has 5 level of table. So for the last level I have 80 white spaces for indenting. I almost scroll left and right to edit my code. It's so annoying to do so
Any ideas for better solution please!
The code you copied may have been written automatically. Nobody wrote it so it's not structured to be easy to read.
Sounds like templates within templates. Each template may have been written by a person then the whole lot put together by automation.
Although there are reasons not to nest code that deeply (you just found one!), I wouldn't say it's a bad thing to without stating why.
If you MUST have it all in one file, use your imagination... First thing I thought was:
<table>
<tr>
<table>
<tr>
<table>
<tr>
<!-- ======= NEST 1 ======== -->
<table>
<tr>
<table>
<tr>
<table>
<tr>
Aside from that
As mentioned, there's probably a setting in your IDE to use 2 spaces
instead of 4 for indentation, it's pretty common.
Try to suss out how the templates-within-templates might be
structured and use php include() to achieve something similar
You can use the two spaces indentation instead of tab indentation.
Please refer link: html indenting standard, tab or two spaces?
As I stated in the comments, this question is not a "problem" we in Stack Overflow tend to solve. More of an opinion-based question.
In the form of an answer I would say that you should never use a space to indent your code. Each space is being counted as a character and this may cause some problems with indenting if you move from editing software to another.
Different software indent the code differently, and I believe most of those programs have the settings that let you adjust the amount of indent that comes out with a TAB.
For quick, auto-indent of HTML code, you should use SHIFT + TAB, which works in most editors. If it doesn't you're off to indenting each line separately.
I'm trying to line up these div's, but it seems to not be working correctly.
the web address is - http://www.minvera.com/hosting-price-sheet
I need all the div's to line up because it's supposed to be similar to a table, but I hate tables.
Any suggestions?
A table is a table and if you want to make a table yous should actually make a table :-) Tables are not bad per se. Ommiting a table just because you dont like tables is wrong. On the other side you are using <br> which should be avoided.
Whatever: If you open up your code between your rows you have some <p> and inside those you have <br> between some links without text.
Remove those <br> and your table looks correct. Those <p> are actually over the full width of your container and therefore are pushing down subsequently the following divs. Maybe they are from some html editor? If you need the links in separated lines make them display:block
It's hard for me to see why you need it that way, because I would have placed my divs differently.
Your div are seperated by a paragraph and in contain a wich make the line break. Also there always a line break after the paragraph so you have to play with the padding and the margin to remove it.
Hope this help.
You can also use display:inline-block; on each div to make them side by side (work without float).
I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.
<tr class="tblpadding">
<td>Character:</td>
<td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
<td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>
Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/
Because the column cell has larger width because of the input type text boxes, just add colspan to that cell
Demo
Also, I just saw that you've inconsistent table cells in your
example, so make sure you fix them according to your requirement.
But as far as the explanation goes, you need to use colspan on the column which will contain those images.
Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..
actually, you should not be using table for creating a layout in the first place.
use div's instead.
to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.
I've created the same look that your table have , using div's only.
if its the same, why bother? because my layout have a flexibility that yours dont have.
take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
How do i replicate this kind of a structure using <div> or <span>'ed CSS
Depends on what you're trying to replicate.
With the simple example you've given, it's not easy to tell exactly what you're trying to achieve, but if what you're tring to do is put two blocks side by side (ie as columns in a page layout), you just need to create a couple of <div> elements and style them using CSS to appear next to each other. Depending on exactly what you want, there are a number of ways you could do the stylesheets.
One option would be to set them both as float:left;. Use width:... to set how wide you want them in pixels or percent.
If float is too complex for you (and it is quite a big jump in concept from a table-based layout), you may want to consider using display:inline-block; instead. This will also allow the <div>s to be positioned next to each other, but gives you more control over how they position themselves.
Finally, if the contents of the <table> is actually a table of data, don't be afraid of keeping it in a table - the <table> tag and its friends are still valid HTML, and putting tabular data into a table is still a good thing.
If you mean that you want to display two DIVs next to eachother, try using the css styles float:left or float:right. use another div with clear:left, clear:right or clear:both to reset following divs to normal behavior.
Here is a link explaining more about that:
http://www.w3schools.com/css/css_float.asp
(click the 'try it' links for very good examples)
I don't know if that's what you're looking for... but I hope so!
I have seen many HTML table related questions in SO. Many questions about browser specific bugs like CSS and JavaScript by involving HTML table is usually asked. An earlier version of DataTable YUI markup looks like as follows:
// dynamically generated
<table>
<tr>
<td>Some content</td>
<td>Other content</td>
</tr>
</table>
Current version now looks like
// dynamically generated
<table>
<tr>
<td><div>Some content</div></td>
<td><div>Other content</div></td>
</tr>
</table>
Notice a div inserted inside a column.
<div> advantages includes
stable behavior and event support across browser
JavaScript framework support
display block by default
easy to create and insert inside a HTML page
You can think a HTML table element as follows
<div class="collection">
<div class="row">
<div>Some content</div>
<div>Other content</div>
</div>
</div>
I need it because I have designed a custom "like a table" component by using div. My custom "like a table" component purpose is to show tabular data. Stable behavior and event support (single and double-click in a row and a column) across many browsers is one feature that i have considered. Notice, for instance, ExtJS uses a custom "like a select" component by using div, and you know many bugs related to HTML select.
So what you think about design a HTML table by using div?
I think it really depends on why you need the divs instead of a table.
If you just want to show tabular data, such as an excel spreadsheet, then you can make it interactive and still use a table.
But, if you are doing something where the appearance may change, or the table may be around another object, then be creative and do your html table.
It sounds like you are not boxed in by how things have been done, but are willing to go outside that box and write a solution that solves your problem best.
But, once you go this route you will want to do extensive testing on whatever browsers you support to ensure that the table appears as you expect, as tables are table, we know what to expect, css and javascript just need more testing.
Divs are always considered if semantics is taken into account.
Tables are easy to design and can be managed quickly without much CSS.
If all you're doing is re-creating it, I think it's quite ridiculous. Though there are legitimate uses for it. Tables have uses, divs have uses, boring arguments about it are just a waste of time.
-- Edit:
See also Why not use tables for layout in HTML?