HTML Table column width practices - html

What are good practices when selecting column widths in a table?
Let's say I have four columns, name (variable width), description (long content of text), count (max 3 chars), date (fixed format).
What would be a good practice? I'm thinking fixed width for descr., count and width (thus actually also making name "fixed" width).
But my real question is, how to select a particular width size.
For instance, if the date format is yyyy-MM-dd is there some trick to convert those 10 chars to a width which will guarantee that it shows ok in any browser using any font and font-size (without also taking up any excessive space)?
edit: With fixed I mean something akin to "fixed amount of pixels relative to font width"

You can declare white-space: nowrap; on all the cells that you want to stretch as much as they need without using extra space (name, date, count), and then simply give your remaining cell a width of 100%. This way the 100% wide cell will expand as much as possible, without causing the other cells to collapse on multiple lines.

If you want to save yourself lots of markup...
First, if by fixed width you mean a fixed percentage, add the following to your stylesheet:
.width1 {
width: 1%;
}
.width2 {
width: 2%;
}
.width99 {
width: 99%;
}
.width100 {
width: 100%;
}
This gives you the flexibility you need if you decide to apply an odd percentage width for any of them if you wish - for example width23 on one of them, width 27 on another.
Now this is the clever bit. Using the col tag, you can apply widths just once instead of on every cell. I know you can apply widths to just the first row, and they will set the widths for the same cell in every other row - but the col tag can be used for setting other properties too. For example:
<table class="width100">
<col class="width15" style="background-color: #cccccc;" />
<col class="width65" />
<col class="width10" />
<col class="width10" />
<tr>
<td>My Sample Name</td>
<td>My Sample Long Description</td>
<td>5</td>
<td>2010-Oct-08</td>
</tr>
</table>
I generally prefer to use this technique - but if it is a layout I will be using on multiple tables (for example the customers table may be the same layout as the agents table) then I will create a class for each column and set the width etc in that class. I will then apply the relevant class to each cell. I suppose both methods could be combined - the relevant class could be applied to the relevant col, but the fact that the properties are set in one place (the stylesheet) means that you only have to change it in once place.
Hope this helps and that it is what you are looking for.
Richard

Related

HTML - about table cell width

In my webpage I have the following:
<table style="width:1000px">
<tr>
<td></td>
<td style="width:500px"></td>
<td></td>
</tr>
</table>
Can I assume that the first and last cell width will be both 250px? or should the behavior be browser dependent here?
Edit:
I am assuming that the first and last cells are empty
#ammcom what everyone has said so far is correct. If you go that route and set your empty cells with an explicit width, make sure you also set this in your CSS:
table { table-layout: fixed; } This will make the table honor your explicit widths like if you use 50% for two empty columns. The default behavior is: table-layout: auto which makes the table prioritize it's width according to content within the cells.

Parsing value in Lotus Notes Xpage

I have a table that pulls values in an xpage in Lotus notes. I have nowrap set so it doesn't wrap. Currently the value extends the width of my columns when I set it to nowrap. However, I don't need to see the whole value that is pulls. I only need to see if a value is in there. So I need the column size to remain the same size. I have tried to use various width values in the xpage. However, the value still extends the column. So either I need to parse the value to make it smaller or figure out where to add the width value so it doesn't increase with the variable.
Thanks in advance.
<td>
<div>
<xp:text escape="false" style="white-space:nowrap" id="computedFieldStatementNotesDisplay" value="#{auditDoc.StatementNotesDisplay}">
</xp:text>
</div>
</td>
Two quick solutions I can think of:
use a css overflow statement overflow: hidden, overflow: auto or maybe overflow: scroll and apply this to the containing <td> or <div> tags; also you might consider setting the table column's width to some value
limit the amount of characters displayed in column using SSJS.
JS code could be like this:
var limit=20; //test for max allowable chars
var val=auditDoc.getItemValueString("StatementNotesDisplay");
if(val.length>limit){
val=val.left(limit);
}
return val;
CSS solution might be the preferred one
Update:
Just saw Per's comment linking to a css solution which is quite complete
I want to thank everyone for their response. I took the information given and applied it. I had to add the width to the text as well place the settings in the .css. This is what worked.
I added this to the .css
.ellipsis span {
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
display:inline-block;
}
Then inside the xpage I called ellipsis and then set the width in the text area.
<td class="ellipsis">
<xp:text escape="false" id="computedFieldStatementNotesDisplay" value="#auditDoc.StatementNotesDisplay}" style="width:100px">
</xp:text>
</td>

How do I make row separator/bottom-border that isn't 100% width?

I've got a set of tabular data that I'm presenting in a standard HTML table tag. The design calls for a one pixel separating line between each row as well as having all cells in a given row be vertically centered against each other. The various rows and cells can have an arbitrary height and need to grow based on the content inside of them.
The tricky piece here comes from the fact that the one pixel separating line is supposed to stop 15px from either side of the edge of the table. My initial inclination to solve this is to merely add a border-bottom to either my <tr> or <td> tags, however, I couldn't for the life of me figure out any sort of way to not get the line to go all the way across. If I put <div> tags inside of the <td> tags, I can then apply the border to there, but then my border bottom is right up against the bottom of the content rather than at the bottom of the row.
The only thing I've been able to make work feels really "dirty" to me.
<table>
<tr>
<td style="width: 15px;"> </td>
<td style="border-bottom: 1px solid gray;">My table data</td>
.... more cells here as needed
<td style="width: 15px;"> </td>
</tr>
</table>
This works because I add those two spacer cells on either end of the row. I've even gone pretty far down some non-table solutions, but I always run into issues trying to get the content to grow correctly (i.e. no absolute positioning in the various rows) and/or getting things to vertically center and wrap like they are supposed to.
Anybody have any better ideas? If it helps, I'm only supporting "newer" browsers, e.g. IE9+/etc, including mobile.
You can try adding a new row between each pair or rows with colspan="n" where n is the total number of collumns, and inside that new row you put a div with the desired specs (I would say 1px height, for instance).
HTML, add this between your rows:
<tr class="test_tr" >
<td colspan="3"><div class="test_div"></div></td>
</tr>
CSS:
.test_tr
{
height: 1px;
}
.test_div {
height: 1px;
width: 80%;
background-color: red;
margin: 0 auto;
}
Here is the Fiddle: http://jsfiddle.net/Y8eWR/

How do I specify that a html cell should have the minimum width it needs to display all of its content

In the following example,
<table style="width: 100%;"><tr>
<td>First Cell</td>
<td>Second Cell</td>
</tr></table>
How do I set the widths so that the first cell/column is exactly as wide as it needs to be to show the content of the first cell and let the second cell fill the rest of the width of the table?
I'm using a GWT HorizontalPanel to do this, so if there's either a html, css or gwt trick. Please let me know.
Thank you
Assuming that “as wide as it needs to be to show the content of the first cell” refers to width needs to show the content without line breaks, you can use something like this:
<table width=681 border><tr>
<td nowrap>First Cell</td>
<td width="100%">Second Cell</td>
</tr></table>
There is no guarantee that this will keep working, since requiring a cell to be 100% wide, yet include another cell with nonzero width, is an impossible requirement. But browsers currently do what seems to be closest to the requirement.
You could achieve the layout you’re aiming for without tables, as explained in this question:
xHTML/CSS: How to make inner div get 100% width minus another div width
HTML
<div class="two-columns">
<div class="fit-to-contents">First Cell</div>
<div class="fill-remaining-space">Second Cell</div>
</div>
CSS
.two-columns {
overflow: hidden;/* Contains descendant floats */
}
.two-columns .fit-to-contents {
float: left;
background: #ffd;
}
.two-columns .fill-remaining-space {
overflow: hidden;
background: #fdf;
}
I’m not sure if that would actually be appropriate for your use-case though, I’d need to see the context.
Tables take care of themselves in HTML. There is no need to force any cell to be any particular size.
What is it you're really trying to do?
What version of HTML are you using? (Hint: Upgrade to HTML5 and CSS!)
Just don't specify any widths at all (neither on the table nor on the cells) and use white-space: nowrap on your table cells.
Put a style of width:1px on the first cell. The table will then make the first cell as narrow as possible, without causing overflow.
Since "as narrow as possible" is the width of the word "First" in this case, you may want to throw in a white-space:nowrap too, otherwise it will display "First" and "Cell" on two lines.
Jsfiddle

HTML table colgroup element not working?

I want different styles on each column of a table. I've read that you could do that by using <colgroup> or <col>, but I had no luck. I have an example here, and nothing seems to change. Am I doing something wrong? Will this work on xhtml?
I know I could add a "class" attribute on each <td>, but that seems weak.
That's correct. While colgroup itself is supported by all browsers, this isn't true for the attributes of the inner col element. Of possible attributes, only width is supported on all browsers. But unlike CSS, <col width=""> only supports pixel and percentage widths.
Don't use it. Instead, create CSS classes and assign them to each td. Yes, it sucks.
EDIT Updated link above to page with better information
Set your table-layout to auto instead of fixed...
table {table-layout: auto;}
My personal site supports multiple themes and I see these kinds of differences all the time.
You could use css selectors to get similar results without adding extra classes.
As an example if you want to give specific style to a second column you can use:
table>tbody>td:nth-child(2){font-weight: bolder;}
Here is a trick I used which actually worked well. In an generic (site wide) css file I put:
.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}
and so on up to whatever I felt was the maximum number of columns in any table I would ever need on my site.
Then on each table I could define the width with a style such as:
<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">
This made it easy to set the column widths plus I could add code to resize the columns which simply had to change the style property on the table for the desired column. This avoided having to make numerous CCS entries every time I wanted to define the column widths for a table. To change a column width you could use something like this:
document.getElementById("tbl1").style.setProperty("--w2", "123px");
The above simply changes the width of column 2 by changing the --w2 variable value.
If you really need to use cols tags without react restriction then dangerouslySetInnerHTML will help:
<colgroup dangerouslySetInnerHTML={{
__html: `
<col style="background: red;"/>
<col style="width: 20px;"/>
`
}}/>
Note that while this works this is not the recommended way to work with react.
In 2020, if you want different styles on columns, you can:
1. style/CSS <col>, but for only a few properties
2. use th/td:nth-child(#number) in CSS (my preferred solution, no idea about what happens with colspans)
3. manually add a class to the th/td elements
References:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns
You're not supposed to use the "width" HTML attribute, instead use style/CSS. In the style/CSS for <col> you're supposed to use only "border", "background", "width" and "visibility". You can use ems to express values.
I'm confused: w3 says "The 'width' property gives the minimum width for the column." which looks contradictory to me, given the existence of a "min-width" property. On Firefox 72 (Ubuntu)
<col style="width: 13em">
sets a "fixed" width (as I expected). If I resize the window, narrowing it, the column is resized and the content is wrapped into more lines.
So I just had this same issue... the real problem is that even when style/CSS is used on <col> (rather than HTML attributes), you can still only style the following things:
width
borders
background colors
visibility
Source: https://www.w3.org/TR/CSS21/tables.html#columns
It is working for me like this with colgroup and col
<colgroup align="center">
<col style="background-color:red">
<col style="background-color:yellow">
<col style="background-color:green">
</colgroup>