为什么document.getElementById('table')定义的变量tbl返回null？

document.getElementById('table')定义的变量tbl返回null的原因可能有以下几种可能：

HTML中没有具有id为'table'的元素。getElementById方法是通过元素的id属性来获取元素的，如果HTML中没有具有该id的元素，那么tbl将返回null。
代码执行顺序问题。如果JavaScript代码在HTML中的元素尚未被解析和加载之前执行，那么getElementById方法将无法找到对应的元素，导致tbl返回null。
元素被移除或隐藏。如果在getElementById方法被调用之前，通过其他代码将id为'table'的元素移除或隐藏了，那么getElementById方法同样无法找到该元素，返回null。
元素id拼写错误。如果id属性值'table'的拼写错误，或者大小写不匹配，那么getElementById方法无法找到对应的元素，返回null。

针对该问题，可以采取以下步骤来解决：

确保HTML中存在具有id为'table'的元素，并且id属性的拼写与JavaScript代码中一致。
确保JavaScript代码在HTML中的元素加载完毕后执行，可以将代码放置在页面加载完成事件的回调函数中，或者将JavaScript代码放在HTML中元素后面。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Document.getElementById Example</title>
</head>
<body>
  <table id="table">
    <tr>
      <td>Table Data</td>
    </tr>
  </table>

  <script>
    window.addEventListener('load', function() {
      var tbl = document.getElementById('table');
      console.log(tbl);
    });
  </script>
</body>
</html>

在上述示例中，JavaScript代码被放置在window对象的load事件回调函数中，确保在页面加载完成后执行，此时调用getElementById方法将能够正确获取到id为'table'的元素，并将其赋值给变量tbl。