Columns Of Words

Chris77 · January 8, 2020, 4:45am

When you look at columns of words online, such as spelling or vocabulary words, I’ve found almost no one programs such columns. Here’s a good example

When you get a long word above or below a short word, it seems to take a bit to figure how to get HTML and CSS to line up columns of words. How do you do it?.

If you have

Thiamin	Niacin	Potassium

Magnesium	Choline	* * B-6

… do you see how the terms in the middle and right don’t line up left to right, yet it’s the same exact code. If you shorten the word magnesium it changes the position of the word in the next cell.

How do you get these terms to line up left in all three columns without complicated programming?

I know you don’t want me to use the TH tag, but I’d like them bold and large without much programming.

Thanks much,

Chris.

m_hutley · January 8, 2020, 6:02am

Because what you’ve got in the first picture is words in columns, and what you have in the second is words in rows.

You’re comparing apples and oranges.

coothead · January 8, 2020, 10:49am

Hi there Chris77,

does this help…

https://codepen.io/coothead/pen/povaZqr

coothead

Chris77 · January 8, 2020, 5:03pm

CH,
I’m afraid not. CodePen just shows 3 blank blank panes. I shut off ghostery and it made no difference. Can you put it on this forum?

M Hutley,
They wouldn’t be rows as you add to the top or bottom. Consider my list a horizontal slice of the image. The programming should be the same for both.

Thanks , Chris

SamA74 · January 8, 2020, 6:06pm

So you want actual columns?

That is a fork of coothead’s pen, hope you can view it.
Either way, one of those should do it.

PaulOB · January 8, 2020, 6:24pm

I think you need to lose the width on that demo as renders each word a letter wide on my iPhone

coothead · January 8, 2020, 7:26pm

I only started using “CodePen” as I was getting
adverse comments from some when posting
the code here.

Perhaps I should use both options simultaneously.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
html {
    box-sizing: border-box;
 }

*, *::before, *::after {
    box-sizing: inherit;
 }

body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 
                             'Segoe UI', roboto, helvetica, 
                              arial, sans-serif;
 }

#words-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 50em;
    padding: 0;
    margin: auto;
    list-style: none;
 }

#words-list li {   
    width: 32.83%;
    padding: 0.5em;
    margin: 0.25%;
    border: 1px solid #565656;
    background-color: #fff;
    font-size: 1.25em;
    font-weight: bold;
    color: #565656;
    word-break: break-all;
 }
</style>

</head>
<body>

 <ul id="words-list">
  <li>Thiamin</li>
  <li>Niacin</li>
  <li>Potassium</li>
  <li>Magnesium</li>
  <li>Choline</li>
  <li>* * B-6</li>
 </ul>

</body>
</html>

coothead

Chris77 · January 9, 2020, 1:18am

Wow. I can’t believe all the code needed to do that. I was thinking about this this morning. Would it be simpler using something that uses justify left? Maybe create 3 columns using 3 tds and then tr after tr to create the height and use justify left in each td ?

When I searched td justify html this came up

Working on this I’ve found this difference. Why does the html compiler treat these two so differently when the code is essemtially the same? Look at that, in the first and second tables it “decides” the width of the box by the width of the text. Why would it do that. What practial use is it? To see what I’m saying just copy this code to a .txt file, then change .txt to .html and then drag it to a browser.

<table width="700" border=1>
<tbody>
<tr align="left">
<th class="thwide"><h2>Thiamin</h2></th>
<th class="thwide"><h2>Niacin</h2></th>
<th class="thwide"><h2>Potassium</h2></th>
</tr>
</tbody></table>

<table width="700" border=1>
<tbody>
<tr align="left">
<th class="thwide"><h2>Magnesium</h2></th>
<th class="thwide"><h2>Choline</h2></th>
<th class="thwide"><h2>* * B-6</h2></th>
</tr>
</tbody></table>

<br><br><br>

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>    </title> 
</head>   
<body> 
       <table width="700" border="1"> 
        <tr align="left"> 
            <th align="left">Thiamin</th> 
            <th>Niacin</th> 
            <th>Potassium</th> 
        </tr> 
        <tr align="left"> 
            <th>Magnesium</td> 
            <th>Choline</td> 
            <th>* * B-6</td> 
        </tr> 
      </table> 
</body> </html>

coothead · January 9, 2020, 1:32am

To quote a famous tennis player…

“You cannot be serious, man”

That site really should be taken down.

coothead

Chris77 · January 9, 2020, 3:39am

Ok. Let’s change my original question to :
Why is there such a big difference in the results in the last code I posted comparing the 2 table way to the 1 table way?

Chris

PaulOB · January 9, 2020, 7:48am

You’re joking aren’t you?

The html in all the examples given to you so far is much less than the html you have used in your 1999 example!

The examples do use css to style the HTML which is the way it should be done. The css is actually quite succinct and does include some suitable defaults for the page which are not actually part of the column code.

Note that the align attribute you are using was deprecated last century and should not be used these days (you can simply use css and set text-align:left on the cells.).

You should not be using tables for layout either as that is semantically incorrect as tables are to be used for tabular data and all you have is a list.

The css columns example seems to do what you want and is only a couple of lines of code at its basic level.

e.g.

CSS:
#words-list {
    column-count: 3;
    padding: 0;
    margin: auto;
    list-style: none;
 }

HTML:

 <ul id="words-list">
  <li>Thiamin</li>
  <li>Niacin</li>
  <li>Potassium</li>
  <li>Magnesium</li>
  <li>Choline</li>
  <li>* * B-6</li>
 </ul>

What could be simpler than that?

I’m afraid you’ve come to the wrong place if you want us to give you bad advice.

The th tag is for table headers and makes no semantic sense as you have it in your example. CSS doesn’t really care what the element looks like anyway as it can style it to suit in 99% of cases. Forget about the default appearance of an html element as you can easily style it to suit with css.

Html is the structure and css handles the look.

They are not the same!

The first example is two separate tables so there is no correlation between content in separate table cells. Why would there be?

The last example is a table with two rows and is one table so all columns will align naturally. The content in a cell must control the width of the columns because a table is rows and columns, You won’t have unequal cells in a table because that’s simply the way that tables work… Surely that last table is the look you were asking for anyway?

Chris77 · January 10, 2020, 4:24am

That inconsistency, cells don’t line up as expected, (and other iconsistencies) is probably why CSS was developed.
I wrote the code. Tell me why you don’t like it. I don’ need aesthetics, I’m just trying to get the structure.

<html>
<head>
    <title>  </title>
<style type="text/css">
.alygn{text-align:left}
.wydth{width:800px}
.brdr{border-width:1px;border-style:solid}
</style>
</head>
<body>
     <table class="wydth">
        <tr class="alygn">
            <th class="brdr">Thiamin</th>
            <th class="brdr">Niacin</th>
            <th class="brdr">Potassium</th>
        </tr>
        <tr class="alygn">
            <th class="brdr">Magnesium</th>
            <th class="brdr">Choline</th>
            <th class="brdr">* * B-6</th>
        </tr>
    </table>
</body>
</html>

Unfortunately, I can’t remeber the css for putting a line around all cells. so I can see if everything is as expected. Border:1px will work but you have to put it in each td. I guess that’s it: td.brdr{border-width=1px}

coothead · January 10, 2020, 9:42am

It’s naughty.

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 
                             'Segoe UI', roboto, helvetica, 
                             arial, sans-serif;
 }

table{
    width: 100%;
    max-width: 50em;
 }

td {
    border: 1px solid #000;
    font-weight: bold;
 }
    
</style>

</head>
<body>

 <table>
  <tbody>
   <tr>
    <td>Thiamin</td>
    <td>Niacin</td>
    <td>Potassium</td>
   </tr><tr>
    <td>Magnesium</td>
    <td>Choline</td>
    <td>* * B-6</td>
   </tr>
  </tbody>
 </table>

</body>
</html>

coothead

Erik_J · January 10, 2020, 10:02am

Hi,

Take a look at the table structure at CSS-Tricks:

Erik_J · January 10, 2020, 10:10am

Please also note that the examples you’re given here has the DOC-type set, which is telling the browser to render in standard mode instead of falling back to quirks mode:

PaulOB · January 10, 2020, 10:17am

Just to clarify that (in most cases) there is no inconsistency in how table cells behave. Their behavior is defined and understandable.

It’s your understanding and knowledge level that is at fault and you do need to study the elements you use in a bit more detail. See the link that Erik posted as a start as there is a lot to learn.

The default behavior for table cells is to allocate space based on the content in each cell. That’s why your separate tables with only one row and different word lengths are not the same.

If you use multiple rows in the same tables the columns will all align naturally. The width of each column is governed by its content but you can set a width for the columns if you wish using the table-layout fixed algorithm.

That’s just a brief synopsis of table behavior so you should study them in more depth and then you can bend them to your will.

As I said above tables are only to be used for tabular data and using tables just for layout is very bad practice and indeed makes no sense to assistive technologies.

We can only point you in the right direction but you are of course free to do what you like

Chris77 · January 11, 2020, 2:11pm

I see, tables don’t know eachother exist, where with tr the tr function coordinates the spacing in the td-s and th-s under tr.

I’m afaid I still don’t agree with your tabular data pont of view. CSS is supposed to be for aesthetics. Creating a table with css is creating structure with css.
border-width-and border-style in the table function works great.

If I could find a dictionaly for html structure and css structure things would be much easier. Look at this disaster as the opening paragraph in a tutorial on CSS. https://htmldog.com/guides/css/beginner/selectors/ Here in the opening page on a tutorial for html https://www.w3schools.com/tags/tag_i.asp apparently tags and elements are the same thing. On this page, https://www.tutorialrepublic.com/html-tutorial/html-elements.php they work harder and accomplish more but still there’s confusuion. is the function p a start tag?

TechnoBear · January 11, 2020, 2:21pm

Yes, CSS is for controlling layout and appearance, and the use of CSS display:table to create columns would be appropriate, if not necessarily the best way to achieve what you want.

What is not appropriate is to use HTML tables, which are specifically for presenting tabular data.

Perhaps these articles will help:

Erik_J · January 11, 2020, 2:38pm

Sort of, you could rather say that elements are inserted in the html by their named tags.

PaulOB · January 11, 2020, 3:03pm

It’s not a ‘point of view’ but a simple statement of fact about the semantics of HTML elements.

You can misuse HTML elements to your hearts desire and they may on the surface appear to look as you want but that doesn’t mean it’s the correct way of doing it.

Html Elements are designed for a specific semantic purpose so that when correctly used the whole document makes logical and semantic sense. This means that purely from looking at the HTML e.g.authors, readers, search engines, assisted devices (such as screen readers ) can all make sense of the document and Produce an accurate document outline.

Css does not impart any structure on HTML elements. Css is creating the look of the element and does not change the semantic use of the element being used even if you make it look like something else.

It’s not clear what you are asking as there is no function in HTML but a ‘p’ element is made up of a start tag and closing tag and should be used for sections of text such as a paragraph.