I just want to make sure I have these labled correctly. Corrections are welcome

1.) inline html table / obsolete code.

2.) inline css html table / obsolete code.

3.) inline html css table cell / obsolete code.
http://codepen.io/dszdasdsa/pen/ezgqaR

4.) inline html css table cell / obsolete code.
http://codepen.io/dszdasdsa/pen/rLyqwp

5.) div css table cell / obsolete code.
http://codepen.io/dszdasdsa/pen/gMgXVd

6.) Grid Layouts using Display Table or CSS Tables.
http://codepen.io/dszdasdsa/pen/GqrVGz

7.) Grid Layouts using Display Table or CSS Tables.
http://codepen.io/dszdasdsa/pen/mERNvo

Iā€™m not sure about ā€œcorrectlyā€, because some of the terminology youā€™re using is your own.

An HTML table is one which uses table tags: <table>, <tr>, <td> etc.

CSS table layout uses display:table, etc. to emulate the way that an HTML table behaves in layout. Itā€™s useful when you want non- tabular data to appear in a grid format.

An example of tabular data, correctly marked up as an HTML table:

There is a relationship between the information in the rows and columns.

An example of non-tabular data in a grid format, which should not be marked up using HTML tables, but could correctly be achieved using CSS table layout:

Inline styles are those written within the HTML tag (bad practice in most instances).

External styles are those placed in an external stylesheet (best practice).

2 Likes

I donā€™t know myself what the best terminology to use for them either, thatā€™s why I wrote, corrections are welcome.

Well, Iā€™ve given you the correct terminology, so you can adjust your descriptions accordingly, should you wish. (I presume you are labelling these for your own reference,)

I have no idea what I would adjust them to.

Surely you can look at the code and decide whether itā€™s using HTML table tags or CSS table layout, or inline or external styles, just as well as anybody else. Itā€™s just a case of looking at the code and checking it against my definitions. If you then think your current title is inaccurate, improve it; if not, leave it.

1 Like

I would label 1 to 5 as obsolete code.
Both 6 and 7 are Grid Layouts using Display Table or CSS Tables.

So 1 to 5 should be discarded and forgotten about, the others could be developed further, for example, streamline the code, make responsive.

3 Likes

Which one uses display, and which one uses css? And whatā€™s the difference?

Both 6 and 7 do. They are just 2 ways of describing the same thing.
When I say ā€œDisplay Tableā€ I am referring to the use of the CSS property display: table which is of course used in conjunction with other values applied to the display proerty, like table-row and table-cell. This creates a ā€˜table-likeā€™ layout using CSS and therefore may also be described as a ā€œCSS Tableā€.
It is in fact not a table becuse it does not employ the HTML <table> element and does not contain tabular data. It just resembles the appearance and behaviour of a table.

HTML for Content and Structure
CSS for Visual Appearance

2 Likes

Donā€™t they both use display tables?

1 Like

How come 5.) is an obsolete code?

These attributes:-

border='0' cellpadding='0' cellspacing='0'

These attributes define visual appearance and thus have no place in html, css should be doing this.
They are now depreciated so should not be used.

So, I should change that to <table class="table">, and then it wonā€™t be obsolete?

Add a class if you need to differentiate that table form other tables. If all tables will have the same css rules, you can leave out the class and use the table element in the css selector.

table {}

But, you should not be using the html table element to display non-tabular data, it is not a layout tool, it is a way of containing data, html elements have nothing to do with visual appearance.

4 Likes

Once again, I direct your attention to the specifications: https://www.w3.org/wiki/HTML/Elements/table

The <table> element represents data with more than one dimension, in the form of a table.

Tables must not be used as layout aids. There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.

3 Likes

To add to what @sama74 has said, I would not use ā€œtableā€ as a class name, not because itā€™s a reserved word or anything, but because if you need a class to differentiate the table from others, youā€™d be better giving it the name of something that indicates what the content of the table is. So for example, if you have a table full of football results, you might use <table class="football_results">. That way, when youā€™re working in your CSS file, or perhaps more importantly if someone else is, there is no misunderstanding about which tableā€™s styling is being adjusted.

2 Likes

so just use <table> then?

Iā€™m sorry - use it for what?

Iā€™m not sure how many more ways I can find to say ā€œuse <table> if you are creating a table of related data; do not use <table> if you are simply trying to control the page layoutā€.

This code will work after I remove table?

<div class='outer'>
      <div class='tcell'>
        <table border='0' cellpadding='0' cellspacing='0'>
          <tr>
            <td class='one'>
              Radio 1
              <div class='two'>
              </div>
            </td>
            <td class='one'>
              Radio 2
              <div class='two'>
              </div>
            </td>
            <td class='one'>
              Radio 3
              <div class='two'>
              </div>
            </td>
          </tr>
          <tr>
            <td class='one'>
              Radio 4
              <div class='two'>
              </div>
            </td>
            <td class='one'>
              Radio 5
              <div class='two'>
              </div>
            </td>
            <td class='one'>
              Radio 6
              <div class='two'>
              </div>
            </td>
          </tr>
          <tr>
            <td class='two'>
              Radio 7
              <div class='two'>
              </div>
            </td>
            <td class='two'>
              Radio 8
              <div class='two'>
              </div>
            </td>
            <td class='two'>
              Radio 9
              <div class='two'>
              </div>
            </td>
          </tr>
        </table>
</div>
    </div>

There would not be very much left over.