CSS tables

HTML & CSS
1

Can anyone point me to a comprehensive description of CSS tables? I have googled till I’m blue in the face and get only part of the story or how to style HTML tables.

2

Are you looking for how to style an html table, or are you looking for the CSS that treats elements like tables, which can make layouts easier than floats?

If it’s the second, then this link should help you (the search term was display:table): https://css-tricks.com/almanac/properties/d/display/

2 Likes
3

As Dave said above don’t confuse the css ‘display:table’ properties with ‘html tables’ as they are different things.

Html tables using table, tr and td tags are meant for tabular data.

CSS display:table properties (used on divs etc) are used for layout and not for tabular data but can mimic some of the behaviours that tables have.

Both can be styled with css.

Perhaps an example of what you are trying to do would help as we could then explain how to go about it :slight_smile:

1 Like
4

Cheers Dave. It was the latter - thanks. I seem to recall there is a property that sets all columns/cells to equal width.

5

Yes this comes in handy a lot.

6

‘table-layout:fixed’ sets the cells to equal widths. It is applied to the display:table element.

7

Thanks Paul. It’s deffo not an HTML table I’m after. I was trying to avoid one of those “how do I do this” posts but couldn’t find a reference manual. But since you ask… :slight_smile:

What I’m trying to create looks vaguely like this:

Two items side-by-side, an image on the left and a single line of text centred horizontally and vertically. It’s the centring that causes the “fun” otherwise I could just float the image.

8 
 .div {
    display:table-cell;
   }

and I believe add vertical align:middle to the text,

9

That’s the css for the child elements. You must also set the parent element too.

.table {
                  display: table;
                  table-layout: fixed;
                }
                .cell {
                  display: table-cell;
                  text-align: center;
                  vertical align:middle;
    }

and

<div class="table">
  <div class="cell"><img></div>
  <div class="cell">Your text</div>
</div>
10

The posts above should do what you want but just remember that tables are shrink to fit so if you want the table to span full width you need to give it 100% width.

11

Thanks chaps. I had

.container {
    display: table;
    table-layout: fixed;
}
.left {
    display: table-cell;
}
.right {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

and

  <div class="left"><img src="images/x.png" width="332" height="179" /></div>
  <div class="right"><a href="#">A line of text</a></div>
</div>

which almost worked, but I needed to add a width to the container div as the right div shrunk to the width of the text.

12

That is a hallmark behavior of tables . Table-cells hug their content. (shrink to fit, widthwise)

13

I know that’s the case with HTML tables. Silly me, I thought table-layout: fixed; would make both cells the same width!

14

Unfortunately, that expectation is a bit misleading. It does not mean that one table cell can determine the width of another table cell. It means that given enough table width, the two table cells will have equal widths without specific cell width assignments regardless of cell content.

Drag the width of the browser window…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--


-->
    <style type="text/css">

.container {
    display: table;
    table-layout: fixed;
    width:70%;
}
.left {
    display: table-cell;
    outline:1px solid magenta;
}
.right {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    outline:1px solid magenta;
}
img {display:block;}

    </style>
</head>
<body>

<div class="container">
    <div class="left"><img src="http://placehold.it/332x179" width="332" height="179"></div>
    <div class="right"><a href="#">A line of text</a></div>
</div>

</body>
</html>
15

Thanks @ronpat I think I have it now. I wouldn’t have believed one small part of the page would take so long! Just the media queries to go… and I think I have them sussed.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.