I am using a table to display data pulled from two database tables. I am trying to put the information in two rows seperated by a hr tag to create a line between them. However the last cell (in this case) does not have anything to be input into the bottom of it. It here a character that is the same height as a letter that I can put in there to make the hr tag line up with the others while still not being visible to the user?
To get a table cell to appear, you need to have a character in it. To add an invisible character, generally, a non-breaking space is used. This is created using the HTML entity.
To get a blank character, use the following HTML entity:
In order to draw lines, however, I would not use an <hr>.
Use CSS to define your table borders:
table td {
border:1px solid #ccc;
padding:1px;
}
You can do this at the table, row, or cell level (or any HTML element for that matter), which makes it very flexible, and renders the hr tag superfluous in this instance.
Related
I am creating HTML template for Outlook and I want my 2 column table to have bottom borders on the columns like this, which I did by setting border-bottom property to the td element
Anyway, the picture is from the browser outlook, because when I open the client I see this .. as you can see the border of the last row is a single line, it's not split..to create a gap between the columns I use border-right: 25px solid white property.
Here is the situation with odd number of items [Img], (https://i.stack.imgur.com/231Af.png) I captured only the last 2 rows, but you can see the last item has a longer border than the upper ones. These tables are generated by code so all rows have the same properties, but still the last row makes the trouble.
The code is really long and messy, therefore I would like to ask without adding any code to the question. Do you have any ideas why this happens?
I have tried using a lot of CSS properties but none of them works.
I need to change a plugin that build a calendar with events. The problem is that these events (that can have one or two lines) are built in rows, not columns. What causes that the events with TWO LINES fill in the spaces below the next horizontal events with ONE LINE. Generating blank spaces.
Here is an illustration of what I'm talking about:
What I need to know is if there is a way to "unlink", or "break" the cell connection with the "TR" of the table, so that the cell adjust its height according to its content, not the full height from the "TR".
Sorry if it sounds confusing.
JS Fiddle: https://jsfiddle.net/sua780k5/
link
EDIT: I'm using a plugin called FullCalendar (http://fullcalendar.io/)
i am writing a hebrew webpage and i need to create a form, the thing is that i need the cells to start from right to left and not from left to right as the default, so when i press the tab button it will go to the left.
i tried the float:right css attribute in the table and tr td but nothing seems to help, when i finally managed changing the cell order all the cells were pressed together.
anyone can please help me specifying the right attributes i need to write.
thank in advance to all the helpers.
Set the layout direction to right-to-left, most naturally with <html dir=rtl>. The dir attribute sets, in addition to directionality of directionally neutral text, the layout order of table columns. So you can write the table cells, containing input elements, in the logical order (first the field to be filled in first, etc.), and the browser will set the cells right to left. So tabbing from the first input field to the second one means going to the left.
Note that dir=rtl will also set default alignment to the right, which is normally appropriate for right-to-left languages.
You probably want to apply the tabindex attribute rather than monkeying with cell order. Also, tables are for tabular data. Is there some reason you're using one for a form?
http://www.w3schools.com/tags/att_global_tabindex.asp
Cue W3schools-bashing. :-)
I've got a bit of a challenge with an HTML table that we need to have raised columns. If you look at the attached image you'll see what I mean.
The purpose of these raised columns is to draw the user's attention to them.
The problem is:
To get the effect of the column raising above the other columns you
need some kind of element/height/margin to appear outside the
boundary of the table, which doesn't seem to work
Same goes for the bottom
To have the drop shadow appear correctly, it needs to be applied to all the cells in a column.
We did get this to work by splitting it up into multiple tables then applying the styles to the table that should be the raised column. The image I've attached is actually a live table working like this.
But, you loose all other needed features of tables...
Row heights don't match if the text wraps in table 1 but not in
table 2.
To deal with the row height issue we applied a fixed height to each table's rows, but then you have to force text to not wrap. If you then get text that's longer than the width you run into trouble.
Does anyone know how this can be achieved without splitting the tables?
Thanks,
jacques
Try having an extra row for the table above the header row (you may have to stop using any th tags) to give you the overbar at the top. Similarly for the bottom, an extra highlighting row.
Although you have to compromise the table a little to do that, it is better in my book than separating into 2 tables, as that defeats all the purposes of the table tag; to show a table, and have that table easily declared.
The effects inside the table are probably best done with jquery, unless the choice of highlighted columns is entirely static, in which case consider rendering a static html version by generating the html appropriately.
I create dynamic HTML pages with 3 columns. Each column can contain a variable amount of text - from 0 to 1000 words. I want the text in the 3 columns look approximately the same height. So, I want to have the column widths change automatically according to the amount of text they contain.
In HTML, this happens automatically in a table, when each cell has a single div of text, see the first table here:
http://tora.us.fm/_script/demotables.html
However, when the cells contain several divs, this doesn't work anymore, see the second table there. The leftmost column is very narrow and tall, instead of being wider and shorter.
Adding a "width" attribute to the leftmost column (by clicking the button) shows the expected result. However, I do not know in advance what column should be what width.
Is it possible to have it adjusted automatically?
A jsfiddle: http://jsfiddle.net/erelsgl/RJa2k/5/
Try to add to the css this td div{white-space: nowrap} or this td div{display: inline}.
Is that the result you need?
With the help of my friend, Eden Erez, I found a hack that partly solves the problem:
In each TD, print the content a second time - inside a special div, like this:
< td >
< div class='autowidth' >
$content
< /div >
$content
< /td >
In the stylesheet, insert this:
.autowidth {visibility:hidden;}
.autowidth * {display:inline;}
In some of the cases, this will make the browser set the column widths as though they are single-paragraph, but still display them as multi-paragraph. See an example here:
http://jsfiddle.net/erelsgl/RJa2k/76/
This works surprisingly good in most cases.