How about setting the display:table when arranging block elements in a row?

Hello, everyone will answer your question .

If you look at the function below, you may or may not receive the parameter separator from the user. If you want to use the value passed by the user or default value, you can also use the if conditional statement, but you can use the OR operator to condition it.

function exampleFn(separator) {

  // [Logical compression, calculating the conditions]
  //  If the separator value passed by the user is present, use the value passed by the user
  //  If there is no separator value passed by the user, use '-'
  separator = separator || '-';

  // ...

}

If you create a three-term operator expression that works the same as above, you can write: In comparison, the use of OR operators is more concise.

separator = separator ? separator : '-';

Unlike the above case, if there is a code that processes values according to changes in conditions (i <l - 1) inside the repetition statement, the use of a three-term condition expression is more efficient than the OR operator.

function exampleFn(separator) {

  var result = '';
  var i = 1;
  var l = arguments.length;

  for ( ; i < l; i++ ) {

    // [The operator of paragraph 3]
    // If the value of the result of the cyclic processing must vary according to the condition i <l - 1,
    // The use of a three-term operator expression is more effective than an OR operator.
    result += arguments[i] + ( i < l - 1 ? separator : '-' );

  }

  return result;

}

Hello. Eunseo ^ - ^

The display:table property setting you mentioned is literally displaying like a table on the screen. It does not have the meaning of the table. Therefore, the screen reader does not recognize it as a table.

The lecture emphasized that you should not use the <table> elements to implement a layout that is inconsistent with meaning, but did not say that it should not be displayed on the screen like a table. It is a problem to use structurally tabular elements to lay out, but it is not a problem to represent them as tables.

Simply put, the CSS representation method is fine, not HTML structuring.

What if it's a problem? It's going to be a cross-browsing check. We need to make sure that the browser is compatible without breaking.

Check result display: table-* display method is available in IE 8+.

Unless you have to consider older browsers, such as IE 6 and 7, you won't have a big problem using them. ^ - ^

Use CSS display:table for Layout