ما الفرق بين table.class و table .class في css

table.class

يعني أن الجدول يحتوي على محدد باسم class كما في الشكل التالي 

<table class="class"></table>

أي كل التنسيقات سوف تطبق على كامل الجدول بما أنه يحتوي على هذا المحدد. 

أما 

table .class

يعني أن هناك عنصر بداخل وسم الجدول يحتوي على محدد باسم class  كما في الشكل التالي 

<table>
  <tr class="class"></tr>
</table>

أي كل التنسيقات سوف تطبق على كامل العنصر بما أنه يحتوي على هذا المحدد.

عند إستخدام table.class_name فأنت تقوم بإختيار أي جدول لديه نفس الclass وتطبق عليه التنسيق

أما إن قمت بإستخدام table .class_name فأنت تقوم بتطبيق التنسيق على العناصر التي لديها نفس ال class وفي داخدل جدول

<table class="testtbl">
	<div class="testtbl">
<!-- elements-->
        </div>
</table>
      
<style>
  table.testtbl{
  //style
  }
</style>

هذا التنسيق سيتم تطبيقه على الجدول نفسه ولكن لا يتم تطبيقه على الdiv بداخله بينما:

<table class="testtbl">
	<div class="testtbl">
<!-- elements-->
        </div>
</table>
      
<style>
  table .testtbl{
  //style
  }
</style>

سيتم تطبيقه على الdiv وليس على الجدول نفسه

وجود فراغ بين أي محددين في CSS يعني أن المحدد الثاني داخل أبناء المحدد الأول

table .class في مثالك تستهدف أبناء الوسم table الحاوين على الصنف class

table .class {
	...
}

<table>
  <tr class="class" /> <!-- مستهدف -->
  <tr>
    <td>
    	<div class="class">...</div><!-- مستهدف -->
    </td>
  </tr>
</table>

عدم وجود فراغ يعني أن العنصر المستهدف بالمحدد الأول يجب أن يحوي نفسه على المحدد الثاني

table.class في مثالك تستهدف أي وسم table يحوي نفسه على الصنف class

table .class {
	...
}

<table class="class"> <!-- مستهدف -->
  ...
</table>