[Miscommunication] How do you center non-tables?

Yes, of course it is possible. Use the suggestions that you have been given over the past few days, and try to do it yourself. Then if it doesn’t work, we can help you out.

I’ve been trying and trying and haven’t been able to figure it out. I honestly don’t know if it’s possible.

Perhaps you should start by taking a break from what you are trying to do and use the time to learn HTML first before you try to do anything else. Until you learn how to write HTML properly you are never going to be able to apply CSS to it to get it to look like anything.

2 Likes

Honestly?

There are no significant structural differences between the HTML table code and the CSS table code. The primary differences appear to be in the paddings applied to the inner table cells. Copy the styling properties from the CSS table into the HTML table’s CSS or inline styles and you should be very close.

You already know that I do not wish to help compose a table structure to hold non-tabular content. I think we have gone overboard to help you learn by providing examples that directly compare HTML tables and CSS tables.

Are there only left and right paddings? Are there no top and bottom paddings to consider?

The padding’s are exactly the same though? right and left are both 50px

I tried matching the css from the non-table to the table, but there was still no difference.

Thanks, I just did it.

non-table

Table

Can you see if you might have a better answer for this.
https://www.sitepoint.com/community/t/how-come-this-error-comes-up-for-one-code-but-not-the-other-and-how-do-you-fix-it/228558/1

If I wanted the height to be 500px, instead of 100%, what would I change? I tried different ways but none of them worked.

So it looks something like this. What would I need to do?


Maybe that’s not a good idea.

The height of what? The only element within the body with height of 100% should be the outer table. The inner table has no height assigned… its height is determined by the content… the rows of Radio things.

Only put 4 rows in in the inner table.

 

Help me understand the picture that you want… what height are you thinking about changing and why? I’m a bit confused.

I changed my mind about that, I have another idea. How would I turn table rows, all of them to 1 column?

May I assume you are talking about an HTML table with only one column?

If so, you don’t really need a table with rows, but if you really want that, then add a <tr> tag set around each <td>

If you want a responsive layout that adjusts the number of radio boxes in each row as the browser width changes, then you should consider @SamA74’s flexbox design, use the CSS table layout, or use inline-blocks for the radio boxes in an unordered list rather than tableware.

That sounds like it ought to be a list, rather than a table structure.

A numbered list

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

which looks like this

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

Or an unordered list

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Which looks like this…

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Clearly presented like this, they are very much in their rawest form, but with the right CSS, they can be made to look rather different. Lists are often used to create menu structures for example, which don’t look much like the above at all.

3 Likes

either one. non-html, or html table.

I’m sorry, but that is a very incomplete answer. I still do not have a clear picture of what you want and why.

I want to convert either an html table, a non-table, or both into 1 column.

See post #94, first choice.

Yes, that’s what rows do… they stack.

Stacked one on top of another.

after I do that, what do I put in the css?

Nothing.

The HTML does the stacking without any CSS applied. What would you like the CSS to do?

Done!